Transcript SharePoint Branding & Design

Web Usability/Standards/Testing
Definitions, Trends, Graphs, and Details
Prepared by:
Erik Swenson
EMC Consulting, Application Practice, Interactive Media
6/28/2010
© Copyright 2010 EMC Corporation. All rights reserved.
1
Agenda
© Copyright 2010 EMC Corporation. All rights reserved.
•
•
•
•
•
•
•
•
Web Standards (Overview)
Web Design Trends
Browsers
Browser Resolutions
Operating Systems
Down The Pipeline
Usability Testing
User Experience
2
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.
© Copyright 2010 EMC Corporation. All rights reserved.
3
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”
© Copyright 2010 EMC Corporation. All rights reserved.
4
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.
© Copyright 2010 EMC Corporation. All rights reserved.
5
Web Design Trends (The Negative)
• Fading Trends:
–
–
–
–
–
–
Liquid/Fluent Designs
Pictures of Smiling Business People
Puzzle Pieces
Globes
Gears
Light Bulbs
© Copyright 2010 EMC Corporation. All rights reserved.
6
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
© Copyright 2010 EMC Corporation. All rights reserved.
7
Web Design Trends (The Positive)
Rounded Corners
Large Header
Light Gradients
Simple Icons
Large Footer
© Copyright 2010 EMC Corporation. All rights reserved.
8
Browsers
80.00%
70.00%
60.00%
50.00%
Internet Explorer
40.00%
Firefox
Chrome
30.00%
Safari
Opera
20.00%
10.00%
Opera Mini
Other
0.00%
Source: http://marketshare.hitslink.com/browser-market-share.aspx
© Copyright 2010 EMC Corporation. All rights reserved.
9
Browser
Resolutions
Source: http://marketshare.hitslink.com/report.aspx?qprid=17
© Copyright 2010 EMC Corporation. All rights reserved.
10
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
© Copyright 2010 EMC Corporation. All rights reserved.
11
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.
© Copyright 2010 EMC Corporation. All rights reserved.
12
© Copyright 2010 EMC Corporation. All rights reserved.
13
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
© Copyright 2010 EMC Corporation. All rights reserved.
14
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.
© Copyright 2010 EMC Corporation. All rights reserved.
15
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?
© Copyright 2010 EMC Corporation. All rights reserved.
16
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.
© Copyright 2010 EMC Corporation. All rights reserved.
17
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.
© Copyright 2010 EMC Corporation. All rights reserved.
18
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.
© Copyright 2010 EMC Corporation. All rights reserved.
19
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.
© Copyright 2010 EMC Corporation. All rights reserved.
20
User Experience
Creative
True user experience goes far
beyond giving customers what
they say they want, or providing
checklist features.
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
Nielsen
Norman
Group
and
industrial
design,
and
interface design.
© Copyright 2010 EMC Corporation. All rights reserved.
Visual
Design
Front-End
Development
Information
Architecture
Technology
Business
21
Pragmatic User Experience Skills
© Copyright 2010 EMC Corporation. All rights reserved.
22
Information Architecture
Designing an efficient
and pleasing user experience
» Process flow
» Card sorting
» Site map
» Wireframes
» Prototyping
» User testing
© Copyright 2010 EMC Corporation. All rights reserved.
23
Visual Design
Creating visual designs
to enhance aesthetics and usability
» Branding
» Aesthetics
» Usability
» Visual design comps
»User testing (again)
© Copyright 2010 EMC Corporation. All rights reserved.
24
THANK YOU
© Copyright 2010 EMC Corporation. All rights reserved.
25