1 / 40

INTERFACE DESIGN

Learn about organizational systems, controlled vocabularies, and the importance of clear and meaningful organizational schemes in interface design. Explore different hierarchical and hypertext structures, and discover how to create groups and define relations between them.

apan
Download Presentation

INTERFACE DESIGN

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CONTENT ORGANIZATION LECTURE & SLIDESET BASED ON MCCRACKEN & WOLFE INTERFACE DESIGN

  2. COMMON WEBSITE COMPLAINT:

  3. “I CAN'T FIND WHAT I'M LOOKING FOR.”

  4. ORGANIZATIONAL SYSTEMS CONTROLLED VOCABULARIES THESAURI

  5. GOALS: ORGANIZE CONTENT SO THAT IT IS USEFUL MEANINGFUL

  6. ORGANIZATIONAL SYSTEMS ORGANIZATIONAL SCHEMES ORGANIZATIONAL STRUCTURES

  7. ORGANIZATIONAL SYSTEMS ORGANIZATIONAL SCHEMES A classification system Clustering things into categories ORGANIZATIONAL STRUCTURES The relationship between groups

  8. ORGANIZATIONAL SCHEMES EXACT or AMBIGUOUS

  9. EXACT ORGANIZATIONAL SCHEMES ‏ - alphabetical, chronological, geographical, Alphabetical: library author index Chronological: appointment book – organized by day Geographical: red state/blue state election returns map

  10. AMBIGUOUS ORGANIZATIONAL SCHEMES ‏ - organized by type, usse, etc - library: subject index not clear cut supermarket organized by...

  11. WHERE IS THE TOMATO SAUCE? With the canned goods? Next to the pasta? In both locations? How about organic tomato sauce?

  12. AMBIGUOUS SCHEMES Topical Task-oriented Audience Specific Metaphor-Driven Hybrid Schemes

  13. AMBIGUOUS SCHEMES Topical Organized by subject ...encyclopedia style

  14. AMBIGUOUS SCHEMES Task-Oriented Organized by function, services, task like menus in software packages

  15. AMBIGUOUS SCHEMES Audience-Specific examples... University Websites, Banking websites, etc

  16. AMBIGUOUS SCHEMES Metaphor-Driven

  17. AMBIGUOUS SCHEMES Hybrid Combines one or more schemes

  18. ORGANIZATIONAL SCHEMES CREATE GROUPS ORGANIZATIONAL STRUCTURES DEFINE THE RELATIONS BETWEEN GROUPS

  19. ORGANIZATIONAL STRUCTURES: HIERARCHY HYPERTEXT DATABASE

  20. ORGANIZATIONAL STRUCTURES: HIERARCHY big picture -> drill down to detail

  21. ORGANIZATIONAL STRUCTURES: HIERARCHY BREADTH: # of choices at each level DEPTH: # of levels

  22. [ROCK] [JAZZ] [HIP HOP] [BLUES][POP]

  23. [ROCK] | [CLASSIC ROCK][HEAVY METAL][SOFT ROCK][ALTERNATIVE]

  24. [ROCK] | [CLASSIC ROCK] | [50s][60s][70s][80s & BEYOND]

  25. [ROCK] | [CLASSIC ROCK] | [50s] | [LITTLE RICHARD][BILL HALEY][CHUCK BERRY][ELVIS PRESLEY]

  26. [ROCK] | [CLASSIC ROCK] | [50s] | [LITTLE RICHARD] | [Long Tall Sally][The Girl Can't Help It][Good Golly, Miss Molly]

  27. [ROCK] | [CLASSIC ROCK] | [50s] | [LITTLE RICHARD] | [Good Golly, Miss Molly]

  28. [ROCK] [JAZZ] [HIP HOP] [BLUES] [POP] | [CLASSIC ROCK][HEAVY METAL][SOFT ROCK][ALTERNATIVE] | [50s][60s][70s][80s & BEYOND] | [LITTLE RICHARD][BILL HALEY][CHUCK BERRY][ELVIS PRESLEY] | [Long Tall Sally][The Girl Can't Help It][Good Golly, Miss Molly] IT CAN BE DIFFICULT TO NAVIGATE FROM ONE LOWER-LEVEL MENU TO ANOTHER... SUPPOSE THE NEXT SONG YOU WANT TO CHOOSE IS BY BRITNEY SPEARS..?

  29. ORGANIZATIONAL STRUCTURES: HYPERTEXT links jumps can take place from one page to another irrespective of ordering

  30. ORGANIZATIONAL STRUCTURES: HYPERTEXT: flexible / can be confusing

  31. ORGANIZATIONAL STRUCTURES: DATABASE search criteria and results

  32. ORGANIZATIONAL STRUCTURES: DATABASE

  33. CONTROLLED VOCABULARY one and only one term is used to describe a particular concept or content item there are no synonyms

  34. DMS 546/446 COURSE WEBSITE syllabus | schedule | assignments | lecture slides | contact instructor | upload project

  35. DMS 546/446 COURSE WEBSITE syllabus | schedule | assignments | lecture slides | contact instructor | upload project Q: ARE ASSIGNMENTS AND PROJECTS THE SAME THING OR DIFFERENT THINGS?

  36. CONTROLLED VOCABULARY In this example “Read Mail” and “Inbox” refer to the same thing. (One is the task, the other is the object or screen.)‏ This is NOT a great example of using a Controlled Vocabulary.

  37. THESAURI PREDETERMINED LISTS OF SYNONYMS, MISSPELLINGS, ETC THAT ARE USED IN THE SEARCH ENGINE FUNCTION

  38. THESAURI AUTOMOBILE: -CAR -AUTO -AUTOS -CARS -TRUCKS -AUTOMOBOLE -AUTOMOBOLES YOU HAVE A DATABASE OF PRODUCTS IN CATAGORIES SUCH AS “AUTOMOBILE” “BOAT” “MOTORCYCLE”, ETC CASE: USER SEARCHED FOR “AUTOMOBILE” OR ANY OF THE SYNONYMS WE HAVE DEFINED FOR “AUTOMOBILE” ACTION: RETURN RESULTS TAGGED “AUTOMOBILE” IN DATABASE

More Related