usability: taking websites from wow to pow

25

Upload: zyrus-deri

Post on 21-Jun-2015

149 views

Category:

Design


2 download

DESCRIPTION

5 Approaches for More Effective Websites

TRANSCRIPT

Page 1: Usability: Taking Websites from Wow to Pow
Page 2: Usability: Taking Websites from Wow to Pow
Page 3: Usability: Taking Websites from Wow to Pow
Page 4: Usability: Taking Websites from Wow to Pow

source: alexa.com

Page 5: Usability: Taking Websites from Wow to Pow
Page 6: Usability: Taking Websites from Wow to Pow
Page 7: Usability: Taking Websites from Wow to Pow
Page 8: Usability: Taking Websites from Wow to Pow
Page 9: Usability: Taking Websites from Wow to Pow
Page 10: Usability: Taking Websites from Wow to Pow

u

Page 11: Usability: Taking Websites from Wow to Pow

SIZE. The use of BIG, bold type adds a level of order to this otherwise chaotic design. The eye should naturally move from big elements down to the smaller elements.

Page 12: Usability: Taking Websites from Wow to Pow

COLOR. The Spectra Viewer site uses colors to represent different news categories, so it’s easy to find a particular type of information based on the color key.

Page 13: Usability: Taking Websites from Wow to Pow

CONTRAST. The contrast between the light, airy header section and dark, earthy footer creates a distinct hierarchy of information.

Page 14: Usability: Taking Websites from Wow to Pow

ALIGNMENT. The use of BIG, bold type adds a level of order to this otherwise chaotic design. The eye should naturally move from big elements down to the smaller elements.

Page 15: Usability: Taking Websites from Wow to Pow

REPETITION. The Virgin site creates repetitive elements like paragraph text, then breaks the repetition when it wants to draw attention (like the red quote text).

Page 16: Usability: Taking Websites from Wow to Pow

PROXIMITY. The left “content” column is clearly separated in proximity from the sidebar widget space. Meta-data within a blog post is placed in close proximity of that post and further from other posts, reinforcing a sense of “belonging”.

Page 17: Usability: Taking Websites from Wow to Pow

DENSITY AND WHITESPACE. By spacing elements out and keeping plenty of whitespace on the page, this design makes it easier for people to roam around and find the small, densely packed boxes of content.

Page 18: Usability: Taking Websites from Wow to Pow

CONTINUATION. Continuation is a principle that is demonstrated when the eye is propelled from one object to another by implied movement. In this example, the bomb grabs our attention first because it is a strong form. The fuse on the top has a curve that moves across then down. It almost forces the user’s eyes to move along the fuse and jump to the greeting text that is anchored on a high contrast text-block with a slight green backdrop.

Page 19: Usability: Taking Websites from Wow to Pow
Page 20: Usability: Taking Websites from Wow to Pow
Page 21: Usability: Taking Websites from Wow to Pow
Page 22: Usability: Taking Websites from Wow to Pow
Page 23: Usability: Taking Websites from Wow to Pow
Page 24: Usability: Taking Websites from Wow to Pow
Page 25: Usability: Taking Websites from Wow to Pow