2/1/2016. Discuss website usability essentials Explain principles of design Critique a website in terms of usability and design

Transcription

1 Due Tuesday, Feb. 9 upload to Blackboard Locate five HTML (not Flash) websites you believe exhibit good web design, usability and accessibility principles. Each website s critique is worth 10 points (50 points total). *A great book by Steve Krug (2014) Address the following items for each website: Site name and URL Audience and purpose Positive elements Areas of improvement Elements to incorporate in your website Discuss website usability essentials Explain principles of design Critique a website in terms of usability and design You never get a second change to make a first impression. Users often leave Web pages in seconds. Where am I? Where should I begin? What are the most important things on this page? Where can I go from here? 1. Create a clear visual hierarchy on each page 2. Break pages up into clearly defined areas 3. Make it obvious what is clickable 4. Minimize noise 1

2 More important = more prominent Related items should be grouped Nest items visually Section headings Chunk information Header Navigation Content Make page scannable Name links/buttons what they are Don t use cute names Make links noticeable and obvious Underline in text links and/or use contrasting colors Make links in navigation a different size and/or font Provide whitespace Facilitates scanning Eliminate unnecessary content Use thumbnail images to entice clicking Length Each page should be about the same length Goal is to minimize scrolling Bad example Good example Consistency Place name and logo on each page Make logo link back to home page Keep navigation consistent Write simple headlines and page titles Speed Appropriately save images for the web Keep audience in mind Accessibility Add alt tags to every non text element Use proper HTML markup Good example 2

3 An informative title (browser bar) The creator s identity (organization) Creation or revision date (copyright line) Link to the home page Menu or icon User Test Ask someone to look at your site Use feedback to make adjustments A simple pneumonic device Contrast Repetition Alignment Proximity Don t be a wimp! If 2 items are not exactly the same, then make them really different Draws the eye Tells the eye where to enter the information Typeface, line thickness, colors, shapes, sizes, space, etc. Contrast Rebellion examples 3

4 Creates unity All elements are in agreement from page to page Adds visual interest to your site Help readers navigate your site Typography Color Design elements (photo sizes, shapes, positioning) Everything should have a visual connection Alignment is not always centered Look at both vertical and horizontal alignment Don t mix alignments Everything on a Web page should look like it was purposively and thoughtfully placed, so think about the placement! RE/GOETZ_SHOW_&_TIMES.html Elements that are close together are seen as related Grouping related elements to create visual units Guides your eye because it organizes your design into digestible chunks Creates more appealing white space The squint test squint your eyes and which elements look like they have a connection 4

5 Go to Choose a category from the Gallery drop down menu. Find a website you like and be prepared to explain why. Use the principles of design: Contrast draws the eye, defines importance Repetition in colors, typography, layout, shapes Alignment symmetry, balance Proximity visual hierarchy 5