Usability: Taking Websites from Wow to Pow
-
Upload
zyrus-deri -
Category
Design
-
view
148 -
download
2
description
Transcript of Usability: Taking Websites from Wow to Pow
![Page 1: Usability: Taking Websites from Wow to Pow](https://reader033.fdocuments.in/reader033/viewer/2022052905/55864935d8b42af76a8b460f/html5/thumbnails/1.jpg)
![Page 2: Usability: Taking Websites from Wow to Pow](https://reader033.fdocuments.in/reader033/viewer/2022052905/55864935d8b42af76a8b460f/html5/thumbnails/2.jpg)
![Page 3: Usability: Taking Websites from Wow to Pow](https://reader033.fdocuments.in/reader033/viewer/2022052905/55864935d8b42af76a8b460f/html5/thumbnails/3.jpg)
![Page 4: Usability: Taking Websites from Wow to Pow](https://reader033.fdocuments.in/reader033/viewer/2022052905/55864935d8b42af76a8b460f/html5/thumbnails/4.jpg)
source: alexa.com
![Page 5: Usability: Taking Websites from Wow to Pow](https://reader033.fdocuments.in/reader033/viewer/2022052905/55864935d8b42af76a8b460f/html5/thumbnails/5.jpg)
![Page 6: Usability: Taking Websites from Wow to Pow](https://reader033.fdocuments.in/reader033/viewer/2022052905/55864935d8b42af76a8b460f/html5/thumbnails/6.jpg)
![Page 7: Usability: Taking Websites from Wow to Pow](https://reader033.fdocuments.in/reader033/viewer/2022052905/55864935d8b42af76a8b460f/html5/thumbnails/7.jpg)
![Page 8: Usability: Taking Websites from Wow to Pow](https://reader033.fdocuments.in/reader033/viewer/2022052905/55864935d8b42af76a8b460f/html5/thumbnails/8.jpg)
![Page 9: Usability: Taking Websites from Wow to Pow](https://reader033.fdocuments.in/reader033/viewer/2022052905/55864935d8b42af76a8b460f/html5/thumbnails/9.jpg)
![Page 10: Usability: Taking Websites from Wow to Pow](https://reader033.fdocuments.in/reader033/viewer/2022052905/55864935d8b42af76a8b460f/html5/thumbnails/10.jpg)
u
![Page 11: Usability: Taking Websites from Wow to Pow](https://reader033.fdocuments.in/reader033/viewer/2022052905/55864935d8b42af76a8b460f/html5/thumbnails/11.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052905/55864935d8b42af76a8b460f/html5/thumbnails/12.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052905/55864935d8b42af76a8b460f/html5/thumbnails/13.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052905/55864935d8b42af76a8b460f/html5/thumbnails/14.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052905/55864935d8b42af76a8b460f/html5/thumbnails/15.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052905/55864935d8b42af76a8b460f/html5/thumbnails/16.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052905/55864935d8b42af76a8b460f/html5/thumbnails/17.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052905/55864935d8b42af76a8b460f/html5/thumbnails/18.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052905/55864935d8b42af76a8b460f/html5/thumbnails/19.jpg)
![Page 20: Usability: Taking Websites from Wow to Pow](https://reader033.fdocuments.in/reader033/viewer/2022052905/55864935d8b42af76a8b460f/html5/thumbnails/20.jpg)
![Page 21: Usability: Taking Websites from Wow to Pow](https://reader033.fdocuments.in/reader033/viewer/2022052905/55864935d8b42af76a8b460f/html5/thumbnails/21.jpg)
![Page 22: Usability: Taking Websites from Wow to Pow](https://reader033.fdocuments.in/reader033/viewer/2022052905/55864935d8b42af76a8b460f/html5/thumbnails/22.jpg)
![Page 23: Usability: Taking Websites from Wow to Pow](https://reader033.fdocuments.in/reader033/viewer/2022052905/55864935d8b42af76a8b460f/html5/thumbnails/23.jpg)
![Page 24: Usability: Taking Websites from Wow to Pow](https://reader033.fdocuments.in/reader033/viewer/2022052905/55864935d8b42af76a8b460f/html5/thumbnails/24.jpg)
![Page 25: Usability: Taking Websites from Wow to Pow](https://reader033.fdocuments.in/reader033/viewer/2022052905/55864935d8b42af76a8b460f/html5/thumbnails/25.jpg)