Web Usability: Creating Great User Experiences!
May 12, 2015
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