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!

Good luck

Wojtek Chojnackiwojciech.chojnacki@symetria.pl