web usability
DESCRIPTION
Explores web usability and offers approaches to make web sites easy to use for an end-user, without requiring the user to undergo any specialized training. Creating websites that intuitively relate the performance actions needed on the web page to the user’s experience and expectations, the web designer/developer is able to present the information to the user in a clear and concise way, to give the correct choices to the users, in a very obvious way, to remove ambiguity regarding the consequences of an action and put the most important thing in the right place on a web page or a web application.TRANSCRIPT
facilitator: Joseph Karr O’Connor@csunwebmaster
Web Usability: Creating Great
User Experiences!
The only two industries that call customers users are the computer industry... and drug dealers.
Web Usability: Creating Great
User Experiences!
User Experience• find it
• action
• rinse and repeat• easily learnable
• efficient
• memorable
• satisfying
More important in 2.0!kayak CSUN Give
Invisible when it works!
Intro
5
Functional Design - Content Model• Support for tasks/goals
Information Architecture• Organizing data/info• Taxonomy
Communication Design• Motivates people to respond• Calls to action
Interaction Design• Designing tasks/activities• Interaction Design Association
Intro
6
Architecture- Taxonomy
NavigationUser interfaceInteractivityUser centeredFindabilityDo-abilityWayfinding
SEO marketingSearchWeb standards AccessibilityGraphic designBackend devCopywritingForms E-commerce
Creating Great User Experiences!
7
1. Doing The Research2. Content Is King3. How It Works
4. The Way It Looks
8
Creating Great User Experiences!
The Machine is Us/ing Us
9
Creating Great User Experiences!
Doing the Research
• Create client persona
Imagine users
• Invent user personas
• Variety
User states - examples
• New applicant
• Enrolled newbie
• Occasional user
• Frequent user
E01
10
1A
Engage client
• Survey and communication forms• Kelly Goto for sample forms
Site map - flow chart
• Visio, Illustrator, OmniGraffle
11
1B
E02
Wireframes
• Bare bones• Start with deep content - work backwards
• Lovelycharts
12
1C
Gather Technical Constraints Early
• Screen flows• Getting from point to point
• Gliffy
13
1D
Design Description Document (DDD)
• thinkvitamin.com
14
1D
E03
Search Engine Optimization• No black hat tactics - or be banished to
the Phantom Zone
Keywords and phrases
• WordTracker
• Google mainpage auto complete
Findability
• Identify appropriate site
• Navigate the pages
15
1E
Open Standards
• Semantic markup
• Machine readable content
• Web Standards Project
• Jeffrey Zeldman: Designing With Web Standards (3rd Ed.)
16
1E
Open Standards
• Semantic markup
• Machine readable content
• Web Standards Project
• Jeffrey Zeldman: Designing With Web Standards (3rd Ed.)
16
1E
Analytics
• Webtrends
• Google Analytics
17
1F
User Testing
• Websort
• Optimalsort
19
1G
Prototype With Fireworks
• Interactive design team prototyping
• Wireframes and pages
• Interactive prototypes
• Rapid prototyping
21
1G
Hands On User Testing
• 5 people are sufficient
• user at computer/projector
• observers gathered aroundVideo User Testing Sessions
• Userfly
• Morae
• Silverback
22
1G
Content is King
• Write to be found
• Main message first
• Cut out words - Tweet it!
• Revise, revise, revise
• How to write numbers
• Check the reading level
• JuicyStudios Readability
23
2A
Content is King
• Word: Tools>Spelling and GrammarIn Mac Word 2008:
✓ Preferences: "Authoring and Proofing Tools"✓ Select "Spelling and Grammar" ✓ Check the "check grammar with spelling" box✓ Then check the "show readability statistics" box ✓ Go to the Tools menu and select "Spelling and Grammar"✓ Word will show the readability statistics after spellcheck
E04
24
2A
Content is King
• Keep paragraphs short
• Keep sentences short
• Use fragments - FAQ: don’t repeat question
• Use the users’ words
• Think globally - ESL
• Give examples
Inverted Pyramid
• Start with conclusion
• Word: Tools>Auto Summarize
25
2B
Design for Scanning
• Most users scan
• Then they use search
• Get rid of needless words - happy talk
• Use headings, bullets, lists
• Tables for TABULAR DATA (ONLY!)
• F pattern and “ad blindness”
Use Images and Icons
• Images convey, clarify message - USE ALT!
• Screenshots, videos
• Icons help user find content, utilities26
2C
Target All Devices
• Mobile views rising 18%/mo (csun.edu)
• JavaScript, PDF, Flash - may lack support
• Test - turn off JavaScript and images
• MAKE IT ACCESSIBLE to everyone!
• Create print style sheet with CSS
• W3C mobile web resource
• Mobile emulators
• iPhoney
• Opera Mini Simulator
• Opera browser>View>Small Screen
27
2D
Respect Me
• How would I react?
• Do good - i.e. opt-in
• Tell me a story
Rediscovery of Content
• Faceted navigation - jcrew
• Folksonomy (popular) tags - digg or delicious
• RSS feeds, mailing lists, newsletters
• Search box
• Feeds, share, follow, etc. : ASMBYC
28
2E
How It Works
• Interface design conventions - they work!
• Google API libraries and samples
• Yahoo User Interface library and patterns
• MooTools
• JQuery UI and tutorials
• Patterns
• Welie Pattern library
• Smileycat Design Elements
• Jennifer Tidwell
29
3A
Navigation
• Findable
• Where am I?
• Where can I go?
• Where have I been?
• How do I get here again?
• Go to deep page - answer those questions
• E-trade
• NPR Shop
• 800x600: does right nav disappear? alistapart
• Drop downs: USPS and csun.edu
30
3B
Types of Navigation
• Accordion
• Simple jQuery accordions
• Breadcrumbs
• Apple Store
• Library of Congress
• Directory
• Ebay
• USPS
32
3D
Types of Navigation
• Doormat
• Stanford
• Double Tab
• State of California
• Tabs
• Trails
• Faceted
• Amazon
• Nordstrom
33
3D
Types of Navigation
• Fly-out
• CSUN (myNorthridge Portal)
• Adobe
• Home Link
• Green Beast
• Icon
• Clear Helper
• Map Navigator
• Google Maps
34
3E
Forms and Buttons
• Required vs Optional
• Crate and Barrel
• Error Messages
• Modal and non-modal
• Don’t lock me out with modal!
• No cryptic error messages, please.
35
3F
Forms and Buttons
• Don’t be too rigid
• Data checking on back end, please
• Anticipate international formats
• Dress for mess 6265857731 626 585-7731 626-585-7731 626.585.7731 (626) 585-7731 or international code 011 353 66 713 0000
36
3F
Forms and Buttons
• Drop-down lists
• Automate with keystrokes
• States, countries, birth years, etc.
38
3F
Forms and Buttons
• Use AJAX auto complete
• Google Search
• Kayak - try airport codes
39
3F
Forms and Buttons
• Determine best use of form elements
• Ease of entry, keystrokes, recognition
• Fewer errors
40
3F
Forms and Buttons
• Instructive design = speed and accuracy
• Move cancel button away from “I’m done”
• Indicate required and optional (color)
• Provide hints
• Limit drop down choices
• More than 5 ‘choose one’?
• Use a select list
• Use radio buttons
41
3F
Forms and Buttons
• Use Spry, CSS, and JQuery to help
• Fancy form design with CSS
• Friendly, understandable, focused error info
• Organize info in logical fieldsets
• Error-free learning
• Completion button most likely choice
• Keep users away from whirling blades
42
3F
Forms and Buttons
• JQuery
• JQuery UI
• Datepicker Demo
• Datepicker UI
• Datepicker Format Date
• JQuery Themeroller
43
3F
Less Friction>More Energy>Flow
• Multiple pathways engage = discover
• IMDb
• Gradual engagement
• Avoid sign-up forms - $300M Button
• Guest vs registered - give good reason
• Picnik
• Visualize (whirled peas)
• iGoogle
44
3G
Optimize for Speedy Download
• Use best practices for speed
• Downloading images, etc., takes time
• Concatenate/minify scripts, run them last
• Combine images with CSS sprites
• Fewer HTTP requests
• Tidy up CSS, put reference at top
• Reduce DNS Lookups
• Add far-future Expires headerExpires: Thu, 15 Apr 2010 20:00:00 GMT
45
3H
Optimize for Speedy Download
• Avoid redirects
• Add trailing slash to hyperlink
• Avoid 301 and 302 status codes
• NEVER USE meta redirects
• Breaks back button, security warnings
• Yahoo Best Practices
• Get YSlow for Firebug and use it
46
3H
Optimize for Speedy Download
• Mezzoblue Sprite Optimization
• Firefox>Tools>Page Info
• gmail
• google search results
• CSSsprites
• Rosenfeld Media
47
3H
Optimize for Speedy Download
• Check spelling
• Validate
• Accessibility, code, CSS - W3C
• Check for broken links
• Xenu’s Link Sleuth
• Google Webmaster Tools
48
3H
Agile Design and Development Practices
• Design system not surface
• Evolutionary, user driven, not final
• No page, only pathways
• Simplicity over complexity
• Collaborative and open design
• Test in major rendering engines + mobile
• WebKit (Safari, Chrome)
• Gecko (Firefox)
• Trident (IE)
• Presto (Opera)
49
3H
The Way It Looks
• Design affects usability
• Aesthetically pleasing objects appear to be more effective
• Professional design increases trust, especially for transactional site
• Design can create order and instill peace and serenity
• Important when asking user to fill out lengthy form
50
4A
Provide a Clear Visual Hierarchy
• Vital info with quick scan
• Visual prominence to important content
• Related content visually related
• Zoom out in Firefox (like squinting)
• Logos take space, not most important
• Visual nesting
51
4B
Contrast
• Craft a visual information hierarchy
• Compel viewers to view where you want them to
• With intelligent contrast and calls-to-action users will follow along
52
4C
Don’t Forget White... oh, never mind!
• CSS for leading and kerning text
• CSS for padding and margins in layout
• Important stuff gets more white space
• Nested boxed content
• Pay attention to padding
• Pay attention to real estate needs
54
4D
Focus
• Westerners typically begin reading a page of information in the upper left hand area
• If you place highly conspicuous (according to contrast) in upper left it will most likely be seen and consumed first by Western users
• Simplification is not organization
• Complex <<-----|--->> Simple
• Chaotic <<---|----->> Order
• NRA
55
4E
Focus
• Horizontal and vertical grids help reduce noise and complexity
• Subtraction
• Tutorialblog
57
4F
Grids
• Fireworks Reticulator
• Dreamweaver - use grids and guides
• Grid: View>Grid>Grid Settings
• Guides: View>Rulers - drag out guides
• Examples of grid layout designs
• Smashingmagazine
• Webdesignerwall
• Newspapers
• USA Today, CNN, CalTech Today,
• Washington Post, MSNBC
58
4G
Make Something Stand Out - For Attention and Action
• Use purposeful intentional contrast
• Avoid small differences
• Don’t violate overall design
• Continue same convention elsewhere
59
4H