web usability/standards/testing

1© Copyright 2010 EMC Corporation. All rights reserved.

Web Usability/Standards/TestingDefinitions, Trends, Graphs, and Details

Prepared by:

Erik SwensonEMC Consulting, Application Practice, Interactive Media6/28/2010


Agenda • Web Standards (Overview)• Web Design Trends• Browsers• Browser Resolutions• Operating Systems• Down The Pipeline• Usability Testing• User Experience


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.

http://www.w3.org/


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”

http://en.wikipedia.org/wiki/Internet_standard

http://en.wikipedia.org/wiki/Specification

http://en.wikipedia.org/wiki/World_Wide_Web

http://en.wikipedia.org/wiki/Best_practices

http://en.wikipedia.org/wiki/Web_site

http://en.wikipedia.org/wiki/Web_design


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.


Web Design Trends (The Negative)• Fading Trends:– Liquid/Fluent Designs– Pictures of Smiling Business People– Puzzle Pieces – Globes– Gears– Light Bulbs


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


Web Design Trends (The Positive)

Rounded Corners

Large Header

Light Gradients

Simple Icons

Large Footer


Browsers

Source: http://marketshare.hitslink.com/browser-market-share.aspx

July, 20

09

Augu

st, 20

09

Septem

ber, 2

009

Octobe

r, 200

9

Novem

ber, 2

009

Decembe

r, 2009

Janua

ry, 20

10

Februa

ry, 20

10

March,

2010

April,

2010

May, 2

0100.00%

10.00%

20.00%

30.00%

40.00%

50.00%

60.00%

70.00%

80.00%

Internet ExplorerFirefoxChromeSafariOperaOpera MiniOther


Browser Resolutions

Source: http://marketshare.hitslink.com/report.aspx?qprid=17


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


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.


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


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.


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?


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.


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.


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.


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.


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


Pragmatic User Experience Skills


Information Architecture

» Process flow» Card sorting» Site map » Wireframes» Prototyping» User testing

Designing an efficientand pleasing user experience


Visual Design

» Branding» Aesthetics» Usability» Visual design comps»User testing (again)

Creating visual designsto enhance aesthetics and usability


THANK YOU

web usability/standards/testing

Documents