Download - Enhancing Website Prototypes Readability
Enhancing website prototype readability
a short tutorial for IA/User Experience Designers
Wojtek Chojnacki
Basic assumptions for mockups
• Schematic representation of web page layout and content structure
• Form follows function
• Black & white
• Mockups sum up to a website prototype
Example: Hotel availability&rates page
• The page informs about:– hotel name, rating and briefly about its features– dates selected by user– room types and rates
• The page allows to:– Go to hotel full description– Modify availability conditions and apply changes– Go to booking process of a chosen room type
This is where we start
• Not really readable and lucid
This is where we start
• Example: Hotel availability&rates page
Not really readable and lucid
Step 1. Underline links
Step 1. Underline links
• Page functionality becomes more visible
Step 2. Use font formatting
Step 2. Use font formatting
• Differentiating font size and boldness is an easy way to present information hierarchy
Step 3. Use frames to group information
Step 3. Use frames to group information
• Even if they will be out for the final design, they facilitate understanding at this stage
Step 4. Get rid of ‘Lorem ipsum’
Step 4. Get rid of ‘Lorem ipsum’
• Use dummy text or generic data
Step 5. Be precise about form elements and buttons
Step 5. Be precise about form elements and buttons
• It is not for the graphic designer to decide on those!