Presentation on theme: "local structure – single screen global structure – whole site"— Presentation transcript:
1 local structure – single screen global structure – whole site startthe systemsinfo and helpmanagementmessagesadd userremove usernavigation designlocal structure – single screenglobal structure – whole sitemainscreenremoveuserconfirmadd user
3 the web … widget choice screen design navigation design environment elements and tags<a href=“...”>page designsite structurethe web, browser, external links
4 physical devices widget choice screen design navigation design environmentcontrolsbuttons, knobs, dialsphysical layoutmodes of devicethe real world
5 think about structure within a screen local global wider still later ...locallooking from this screen outglobalstructure of site, movement between screenswider stillrelationship with other applications
6 from one screen looking out localfrom one screen looking out
10 goal seekinggoalstart… try to avoid these bits!
11 four golden rules knowing where you are knowing what you can do knowing where you are goingor what will happenknowing where you’ve beenor what you’ve done
12 where you are – breadcrumbs shows path through web site hierarchytop level categorysub-categoryweb sitethis pagelive linksto higherlevels
13 modes lock to prevent accidental use … if lock forgotten remove lock - ‘c’ + ‘yes’ to confirmfrequent practiced actionif lock forgottenin pocket ‘yes’ gets pressedgoes to phone bookin phone book … ‘c’ – delete entry ‘yes’ – confirm … oops !
14 between screens within the application globalbetween screenswithin the application
15 hierarchical diagrams the systeminfo and helpmanagementmessagesadd userremove user
16 hierarchical diagrams ctd. parts of applicationscreens or groups of screenstypically functional separationthe systemsinfo and helpmanagementmessagesadd userremove user
17 navigating hierarchies deep is difficult!misuse of Miller’s 7 ± 2short term memory, not menu sizeoptimal?many items on each screenbut structured within screensee /e3/online/menu-breadth/
18 what does it mean in UI design? think about dialoguewhat does it mean in UI design?Minister: do you name take this woman …Man: I doMinister: do you name take this man …Woman: I doMinister: I now pronounce you man and wife
19 what does it mean in UI design? think about dialoguewhat does it mean in UI design?marriage servicegeneral flow, generic – blanks for namespattern of interaction between peoplecomputer dialoguepattern of interaction between users and systembut details differ each timeMinister: do you name take this woman …
20 network diagrams show different paths through system main screen removeuserconfirmadd usershow different paths through system
21 network diagrams ctd. what leads to what what happens when including branchesmainscreenremoveuserconfirmadd user
22 between applications and beyond ... wider stillbetween applicationsand beyond ...
23 wider still … style issues: functional issues navigation issues platform standards, consistencyfunctional issuescut and pastenavigation issuesembedded applicationslinks to other apps … the web