PBA Front-End Programming Universal Usability. Two aspects of usability in web design – Enabling...

23
PBA Front-End Programming Universal Usability

Transcript of PBA Front-End Programming Universal Usability. Two aspects of usability in web design – Enabling...

Page 1: PBA Front-End Programming Universal Usability. Two aspects of usability in web design – Enabling the typical user to accomplish her task as efficiently.

PBA Front-End Programming

Universal Usability

Page 2: PBA Front-End Programming Universal Usability. Two aspects of usability in web design – Enabling the typical user to accomplish her task as efficiently.

Universal Usability

• Two aspects of usability in web design– Enabling the typical user to accomplish her task

as efficiently as possible (the user doesn’t want to spend time on our wesbite)

– Enabling any user to be able to use our website, no matter his/her limitations

Page 3: PBA Front-End Programming Universal Usability. Two aspects of usability in web design – Enabling the typical user to accomplish her task as efficiently.

Universal Usability

• Accessibility – making the web accessible for users with disabilities

• W3C – World Wide Web Consortium established the Web Accessibility Initiative (WAI) in 1999

• http://www.w3.org/WAI/

Page 4: PBA Front-End Programming Universal Usability. Two aspects of usability in web design – Enabling the typical user to accomplish her task as efficiently.

Universal Usability

• Usability – how do we measure that…?– Speed – how quickly can the user accomplish the

desired task?– Error rate – how many errors happened during the

process?– Learnability – how easy is it to do again?– Satisfaction – do we want to do it again?

Page 5: PBA Front-End Programming Universal Usability. Two aspects of usability in web design – Enabling the typical user to accomplish her task as efficiently.

Universal Usability

• User-centered design• The developer is not the

user – the user is the user • Ask the user – but how…?– User focus groups– Task analysis– User testing and feedback– Web analytics

Page 6: PBA Front-End Programming Universal Usability. Two aspects of usability in web design – Enabling the typical user to accomplish her task as efficiently.

Universal Usability

• User focus groups– Face-to-face meetings with a group of potential

users (target audience)– Get ideas directly from the ”source”– Priorities– Get to know your target audience better– Use during entire process– Managed by Usability Lead, not trivial…

Page 7: PBA Front-End Programming Universal Usability. Two aspects of usability in web design – Enabling the typical user to accomplish her task as efficiently.

Universal Usability

• Task analysis / User testing– How does a user actually accomplish her task?– What steps are involved?– What information should be available?– Silently observe the user when she tries to

accomplish her task (video, eye-track,…)– Enables us to build ”models” of a task, to be used

in actual design

Page 8: PBA Front-End Programming Universal Usability. Two aspects of usability in web design – Enabling the typical user to accomplish her task as efficiently.

Universal Usability

• Web analytics (what is it…?)– Tools provided by the website

host to gather information about how your website is being used

– A post-deployment tool, so most useful for ”tweaking” your website design

– Google Analytics

Page 9: PBA Front-End Programming Universal Usability. Two aspects of usability in web design – Enabling the typical user to accomplish her task as efficiently.

Universal Usability

• Information available from Google Analytics– Users previous website– Keywords used in search engine– Pages visitied on site (and order)– User configuration (OS, browser, screen

resolution, color settings, etc.)– Number of visits by the user– …and more

Page 10: PBA Front-End Programming Universal Usability. Two aspects of usability in web design – Enabling the typical user to accomplish her task as efficiently.

Universal Usability

• Problems with Web analytics– Personal user information (age, gender,

disabilities, …)– Why did the user visit your website…?

• Use analytics as supplement, not as your only source of user information

Page 11: PBA Front-End Programming Universal Usability. Two aspects of usability in web design – Enabling the typical user to accomplish her task as efficiently.

Universal Usability

• How do we manage all this user information?• One strategy: construct a set of ”personas”• A persona is a fictious user – a ”condensate”

of the gathered user information• Construct enough personas to cover the range

of users you want to accomodate• Example

Page 12: PBA Front-End Programming Universal Usability. Two aspects of usability in web design – Enabling the typical user to accomplish her task as efficiently.

Universal Usability

• So, can we make one website that is– As efficient as possible for the typical user?– Accessible for all users?

• No…and yes!– We still only design and create one website…– …but it is so flexible that it can ”manifest” itself

in an appropriate manner for everybody• Universal Design

Page 13: PBA Front-End Programming Universal Usability. Two aspects of usability in web design – Enabling the typical user to accomplish her task as efficiently.
Page 14: PBA Front-End Programming Universal Usability. Two aspects of usability in web design – Enabling the typical user to accomplish her task as efficiently.

Universal Usability

• Principles of Universal Design– Eqitable Use– Flexibility in Use– Simple and Intuitive Use– Perceptible Information

Page 15: PBA Front-End Programming Universal Usability. Two aspects of usability in web design – Enabling the typical user to accomplish her task as efficiently.

Universal Usability

• Equitable Use• The design is useful and marketable to people

with diverse abilities. Provide the same means of use for all users: identical whenever possible; equivalent when not

• Only diversify when you really need to

Page 16: PBA Front-End Programming Universal Usability. Two aspects of usability in web design – Enabling the typical user to accomplish her task as efficiently.

Universal Usability

• Flexibility in Use• The design accommodates a wide range of

individual preferences and abilities. Provide choice in methods of use

• The web offers a great deal of flexibility – use it!

Page 17: PBA Front-End Programming Universal Usability. Two aspects of usability in web design – Enabling the typical user to accomplish her task as efficiently.
Page 18: PBA Front-End Programming Universal Usability. Two aspects of usability in web design – Enabling the typical user to accomplish her task as efficiently.

Universal Usability

• Simple and Intuitive Use• Use of the design is easy to understand, regard-

less of the user’s experience, knowledge, language skills, or current concentration level. Eliminate unnecessary complexity and arrange information consistent with its importance

• To try achieve a high signal-to-noise ratio…

Page 19: PBA Front-End Programming Universal Usability. Two aspects of usability in web design – Enabling the typical user to accomplish her task as efficiently.
Page 20: PBA Front-End Programming Universal Usability. Two aspects of usability in web design – Enabling the typical user to accomplish her task as efficiently.
Page 21: PBA Front-End Programming Universal Usability. Two aspects of usability in web design – Enabling the typical user to accomplish her task as efficiently.

Universal Usability

• Perceptible Information– The design communicates necessary information

effectively to the user, regardless of ambient conditions or the user’s sensory abilities.

– Use different modes (pictorial, verbal, tactile) for redundant presentation of essential information and provide compatibility with a variety of techniques or devices used by people with sensory limitations

Page 22: PBA Front-End Programming Universal Usability. Two aspects of usability in web design – Enabling the typical user to accomplish her task as efficiently.

Universal Usability

• Perceptible Information – examples– Provide alternative text for images– Use proper markup for headings, etc.– Provide audio alternative for video– Provide text alternative for audio– Provide ways of regulating text sizes,

contrast, color palette, etc

Page 23: PBA Front-End Programming Universal Usability. Two aspects of usability in web design – Enabling the typical user to accomplish her task as efficiently.

Universal Usability