Upload
josephine-preston
View
215
Download
0
Tags:
Embed Size (px)
Citation preview
1© Copyright 2010 EMC Corporation. All rights reserved.
Web Usability/Standards/Testing
Definitions, Trends, Graphs, and Details
Prepared by:
Erik SwensonEMC Consulting, Application Practice, Interactive Media6/28/2010
2© Copyright 2010 EMC Corporation. All rights reserved.
Agenda • Web Standards (Overview)• Web Design Trends• Browsers• Browser Resolutions• Operating Systems• Down The Pipeline• Usability Testing• User Experience
3© Copyright 2010 EMC Corporation. All rights reserved.
Web Standards
The term “Web Standards” refers in part to specifications published by the World Wide Web Consortium (W3C), an industry standards body established in 1994. Web Standards are more than just following a set of rules, however — it focuses on: • Making content accessible to all users regardless of
device and disability.• Ease of maintenance• Flexible structure which to accommodate design
adjustments.
4© Copyright 2010 EMC Corporation. All rights reserved.
Web StandardsSource: Wikipedia
“Web standards is a general term for the formal standards and other technical specifications that define and describe aspects of the World Wide Web. In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods”
5© Copyright 2010 EMC Corporation. All rights reserved.
Web Standards• Content is the message that you’re trying
to get across. If your application were a movie, the content would be the typed script. For a website, this would include the copy, form fields, and data for each page.
• Styling is the pretty stuff — the fonts, colors, and general look-and-feel on a page. Of course, the page’s layout (the way the content is visually organized on the screen) is also an element of visual style.
• Behavior refers to how the page interacts with the user. For example, a page may include real-time form validation (did the user remember to enter his or her last name? ) or more elaborate features such as realtime calculations.
6© Copyright 2010 EMC Corporation. All rights reserved.
Web Design Trends (The Negative)• Fading Trends:– Liquid/Fluent Designs– Pictures of Smiling Business People– Puzzle Pieces – Globes– Gears– Light Bulbs
7© Copyright 2010 EMC Corporation. All rights reserved.
Web Design Trends (The Positive)• Trends for the better:
– Fixed Width, Centered Designs– Simplicity– Subtle Gradients– Shadows to emboss– Clean Illustrations– Replacement / Addition of Icons for text– White Space (Minimalistic)– Less is More– Clean non-pixilated illustrations– Transparencies
– Big Type, Headers, Footers, Images…– Dark backgrounds with white text.– Hand drawn– Social Media Connections
8© Copyright 2010 EMC Corporation. All rights reserved.
Web Design Trends (The Positive)
Rounded Corners
Large Header
Light Gradients
Simple Icons
Large Footer
9© Copyright 2010 EMC Corporation. All rights reserved.
Browsers
Source: http://marketshare.hitslink.com/browser-market-share.aspx
July
, 200
9
Augus
t, 20
09
Sept
embe
r, 20
09
Octob
er, 2
009
Novem
ber,
2009
Decem
ber,
2009
Janu
ary,
201
0
Febr
uary
, 201
0
March
, 201
0
April,
201
0
May, 2
010
0.00%
10.00%
20.00%
30.00%
40.00%
50.00%
60.00%
70.00%
80.00%
Internet ExplorerFirefoxChromeSafariOperaOpera MiniOther
10© Copyright 2010 EMC Corporation. All rights reserved.
Browser Resolutions
Source: http://marketshare.hitslink.com/report.aspx?qprid=17
11© Copyright 2010 EMC Corporation. All rights reserved.
Down the Pipeline
• HTML 5– Canvas Element
• Graphing
– Local Storage (Mail Application)– Open Sockets
• CSS 3.0– Firefox, Google Chrome, Safari, IE9 to come
• Java Script Engine– Flicker, Faster User Experience
12© Copyright 2010 EMC Corporation. All rights reserved.
SMART PHONE OS STATS
• Symbian: 45% • BlackBerry: 20% • iPhone: 15% • Windows Mobile: 6% • Android: 4%• Other: 10%
• While North America 17% of the world’s internet users, it has only 7% of the world’s mobile users.
• Europe (22%) and Asia (45%) have the same figure for both.
13© Copyright 2010 EMC Corporation. All rights reserved.
14© Copyright 2010 EMC Corporation. All rights reserved.
Usability Testing Process• Determine the objectives
• Recruiting allowances
• Timeframe to complete..
• Select the method of test.
• Draft the plan
• Conduct a quick test
• Refine
• Final sign off and commitment from the client.
• Plan – Preparation– Execution– Analysis and presentation of results
15© Copyright 2010 EMC Corporation. All rights reserved.
Usability Testing Method• Develop problem statements or test objectives.
• Use a sample of end users (which may or may not be selected randomly).
• Represent the actual environment the users will face.
• Observe end users' interaction with that environment. The test monitor interrogates and probes end users for feedback.
• Collect qualitative and quantitative performance and preference measurements.
• Recommend improvements to the design of the environment.
16© Copyright 2010 EMC Corporation. All rights reserved.
Usability Testing (Details)• 1. Plan scope, issues, participants, location, budget – What are you going to test? – What concerns do you have about the site that
you want to test? – Which users should participate in the test? – Where will you conduct the test? In a fixed
laboratory? In a conference room or other space with a portable lab? In a conference room or other space but without any recording equipment? Remotely?
– What is your budget for testing?
17© Copyright 2010 EMC Corporation. All rights reserved.
Usability Testing (Details)• 2. Develop scenarios – Select relevant tasks for users to try. – Prepare, try out, and refine scenarios for those
tasks. Note: Make sure the scenarios are clearly written and not too much of a challenge for the allotted test time.
18© Copyright 2010 EMC Corporation. All rights reserved.
Usability Testing (Details)• 3. Recruit test participants – Recruit users who accurately represent your
current or potential users. – Consider using a firm that specializes in
recruiting for usability tests. – If you do it yourself, build a database of users for
future tests.
19© Copyright 2010 EMC Corporation. All rights reserved.
Usability Testing (Details)• 4. Conduct usability testing
– Have a trained facilitator interact with the user. – Have trained observers watch, listen, and take notes. – Make sure participants know that they are helping by
trying out the Web site; the site is being tested, not them.
– Get participants to think aloud as they work. – Let participants express their reactions. – Listen! Do not lead. Be sure to stay neutral in your
words and body language. Be careful not to ask leading questions that may skew the participants' responses.
– Take detailed, useful notes concentrating on observations of behavior rather than inferences.
20© Copyright 2010 EMC Corporation. All rights reserved.
Usability Testing (Details)• 5. Make good use of the test results – Compile the data from all participants. – List the problems that participants had. – Sort the problems by priority and frequency of
the problem. – Develop solutions. Get expert advice if the
solutions are not obvious. – Fix the problems. – Test the revised version to ensure you made the
right design decisions.
21© Copyright 2010 EMC Corporation. All rights reserved.
Information Architecture
Business
Front-End Developme
nt
Technology
VisualDesign
Creative
True user experience goes far beyond giving customers what they say they want, or providing checklist features.
Nielsen Norman Group
In order to achieve high-quality user experience in a company's offerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design.
User Experience
22© Copyright 2010 EMC Corporation. All rights reserved.
Pragmatic User Experience Skills
23© Copyright 2010 EMC Corporation. All rights reserved.
Information Architecture
» Process flow
» Card sorting
» Site map
» Wireframes
» Prototyping
» User testing
Designing an efficientand pleasing user experience
24© Copyright 2010 EMC Corporation. All rights reserved.
Visual Design
» Branding
» Aesthetics
» Usability
» Visual design comps
»User testing (again)
Creating visual designsto enhance aesthetics and usability
25© Copyright 2010 EMC Corporation. All rights reserved.
THANK YOU