Web Design
- From Concept to Execution
- Building an Outline
- Converting your Outline into a Site Map
- Navigation Design
- Click-Through Prototype
Navigation Design
- Give user a sense of size and place
- How big is the site?
- Where is the user on the site?
- Make the interface idiot-proof
- User interface elements should be in prominent locations and labeled
- Ensure consistent look-and-feel
Giving Feedback about Location
- Cross-navigation
- Color-coding
- Tabs
- Breadcrumb trail
- Process Steps
Cross-Navigation
- Links to all main sections of the web site in one convenient location
- Appears on every web page as a tool for users to get around
![]()
Color-Coding
- Color-coding can be used to reinforce the user's sense of place
- Use a unique color scheme for each section (like Yellow Pages vs White Pages)
- Buttons in the cross-navigation system should be colored accordingly
![]()
Tabs
- Tabs are a virtual metaphor to help users recognize how to use the cross-navigational system
![]()
Breadcrumb Trails
- Breadcrumb trails show users how deep they are in the site
- Provide users with a "lifeline" to retrace their steps through the hierarchy
![]()
Process Steps
- This navigation device, used to keep track of the user's progress as to what stage of a process they are in (eg checkout), is commonly found on e-commerce sites
![]()
Visual Feedback
- Rollovers
- An image that changes its appearance when the mouse moves over it
- Audio or animation
- An animated button can command the user's attention
Maximal Use of Space
- As a designer, you face a dilemma:
- Space is at a premium, so you try to fit many small elements on a page
- But the smaller the interface elements, the less usable the web page becomes
- The solution is to use small elements that expand when the user rolls over them to present more options
- Swaps change the appearance of a graphic on mouse rollover, but in another part of the page
- Pop-up and jump menus appear when the mouse rolls over a button
- Shrink-and-expand interfaces expend outward in an animation to reveal more navigation choices
- Example of a swap (move the mouse over the links):
Go deeper ![]()
Play the mummy game Be an explorer
Click-Through Prototype
- To create a demonstration protoype, mock up key pages of your site
- Illustrate how a user would walk through a particular task (eg ordering a product)
- Fake what you can, without committing to a particular design!