Web Usability/Standards/Testing

1. Web Usability/Standards/Testing Definitions, Trends, Graphs, and Details • Prepared by: • Erik Swenson • EMC Consulting, Application Practice, Interactive Media • 6/28/2010

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

3. 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. Web Standards Source: 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. Web Standards • Contentis 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. • Stylingis 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. • Behaviorrefers 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. Web Design Trends (The Negative) • Fading Trends: • Liquid/Fluent Designs • Pictures of Smiling Business People • Puzzle Pieces • Globes • Gears • Light Bulbs

7. 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. Web Design Trends (The Positive) Rounded Corners Large Header Light Gradients Simple Icons Large Footer

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

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

11. 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. 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.

14. 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. 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. 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. 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. 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. 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. 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. User Experience Creative VisualDesign True user experience goes far beyond giving customers what they say they want, or providing checklist features.Nielsen Norman Group Front-End Development Information Architecture 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. Technology Business

22. Pragmatic User Experience Skills

23. Information Architecture Designing an efficient and pleasing user experience • Process flow • Card sorting • Site map • Wireframes • Prototyping • User testing

24. Visual Design Creating visual designs to enhance aesthetics and usability • Branding • Aesthetics • Usability • Visual design comps • User testing (again)