Download - Interface Design
![Page 1: Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052900/55617d61d8b42ade208b5338/html5/thumbnails/1.jpg)
INTERFACE DESIGNNavigation and page design
![Page 2: Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052900/55617d61d8b42ade208b5338/html5/thumbnails/2.jpg)
“WAYFINDING”1. Orientation
2. Route decisions
3. Mental mapping
4. Closure
![Page 3: Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052900/55617d61d8b42ade208b5338/html5/thumbnails/3.jpg)
Maps & navis1. Paths
2. Regions
3. Nodes
4. Landmarks
![Page 4: Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052900/55617d61d8b42ade208b5338/html5/thumbnails/4.jpg)
paths• Consistent and predictable links• Internal (habitual to the user)• External (breadcrumb trails)
![Page 5: Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052900/55617d61d8b42ade208b5338/html5/thumbnails/5.jpg)
regions• Identifiable regions and spaces• Consistent yet flexible/customizable• Page grid, terminology, links
![Page 6: Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052900/55617d61d8b42ade208b5338/html5/thumbnails/6.jpg)
![Page 7: Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052900/55617d61d8b42ade208b5338/html5/thumbnails/7.jpg)
Nodes• Too much choices can be overwhelming• Balance between user freedom and
guidance
![Page 8: Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052900/55617d61d8b42ade208b5338/html5/thumbnails/8.jpg)
![Page 9: Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052900/55617d61d8b42ade208b5338/html5/thumbnails/9.jpg)
LANDMARKS• Orientation cues (“You are here”)• Use of graphics and titles
![Page 10: Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052900/55617d61d8b42ade208b5338/html5/thumbnails/10.jpg)
![Page 11: Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052900/55617d61d8b42ade208b5338/html5/thumbnails/11.jpg)
Search tools• Users see less of the homepage• They have expectations of where search
bars are located
![Page 12: Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052900/55617d61d8b42ade208b5338/html5/thumbnails/12.jpg)
![Page 13: Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052900/55617d61d8b42ade208b5338/html5/thumbnails/13.jpg)
![Page 14: Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052900/55617d61d8b42ade208b5338/html5/thumbnails/14.jpg)
Design tips: Clear navigation
![Page 15: Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052900/55617d61d8b42ade208b5338/html5/thumbnails/15.jpg)
Design tips: No dead ends
![Page 16: Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052900/55617d61d8b42ade208b5338/html5/thumbnails/16.jpg)
Design tips: Simple yet unique
![Page 17: Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052900/55617d61d8b42ade208b5338/html5/thumbnails/17.jpg)
Design tips: Visible graphic identity
![Page 18: Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052900/55617d61d8b42ade208b5338/html5/thumbnails/18.jpg)
Design tips: Composition
![Page 19: Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052900/55617d61d8b42ade208b5338/html5/thumbnails/19.jpg)
Trends in web
composition
![Page 20: Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052900/55617d61d8b42ade208b5338/html5/thumbnails/20.jpg)
Web Design conventions
![Page 21: Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052900/55617d61d8b42ade208b5338/html5/thumbnails/21.jpg)
Web Design conventions
![Page 22: Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052900/55617d61d8b42ade208b5338/html5/thumbnails/22.jpg)
More conventions• Informative title• Author or institution• Date created and revised/edited• Copyright/ownership statements• Link to home/main page• Alt text for images• Headings for sections