Top Banner
Taking Your Site From Useful to Usable
54

Taking Your Site From Useful to Usable

Dec 14, 2014

Download

Design

Tony Naccarato

We all think that we know what is best. We build our sites and applications the way we think it should be. But let’s admit it, we are not our users. So, in what ways can we create a better experience for our users? During this session, you will learn how to help make your site or application a better user experience through a few simple steps like interactions, typography, and testing.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Taking Your Site From Useful to Usable

Taking Your Site From Useful to Usable

Page 2: Taking Your Site From Useful to Usable

@tonynaccarato

Tony NaccaratoUser Experience Designer

Page 3: Taking Your Site From Useful to Usable

Photo by slworking2

Page 4: Taking Your Site From Useful to Usable

Photo by Alejandro Escamilla

Page 5: Taking Your Site From Useful to Usable

WHY?

Page 6: Taking Your Site From Useful to Usable

Useful Usable

Desirable

Page 7: Taking Your Site From Useful to Usable

What makes a site USEFUL?Content that offers value to the user

Page 8: Taking Your Site From Useful to Usable

A Website with no content?

Photo by Sebastiaan ter Burg

Page 9: Taking Your Site From Useful to Usable

Is having a useful website enough?

Page 10: Taking Your Site From Useful to Usable
Page 11: Taking Your Site From Useful to Usable
Page 12: Taking Your Site From Useful to Usable
Page 13: Taking Your Site From Useful to Usable

Useful Usable

Desirable

Page 14: Taking Your Site From Useful to Usable

What makes a site USABLE?Easy access to the valuable content

Page 15: Taking Your Site From Useful to Usable
Page 16: Taking Your Site From Useful to Usable

The Secret Lives of LinksLinks need to communicate

Jared Spool

Page 17: Taking Your Site From Useful to Usable
Page 18: Taking Your Site From Useful to Usable

The Meaning of Easy Access How can we make our site usable?

How do we know if our site is usable?

Page 19: Taking Your Site From Useful to Usable

TEST IT

Page 20: Taking Your Site From Useful to Usable

Test ItThe earlier the better

Page 21: Taking Your Site From Useful to Usable

Photo by Bev Goodwin

“If I had asked people what they wanted, they would have said faster horses” Henry Ford

Page 22: Taking Your Site From Useful to Usable

85% 99%

Page 23: Taking Your Site From Useful to Usable
Page 24: Taking Your Site From Useful to Usable

AffordanceCharacteristics of an object influence its function

Page 25: Taking Your Site From Useful to Usable

Photo by Jeremy Page

Page 26: Taking Your Site From Useful to Usable

Icons

Page 27: Taking Your Site From Useful to Usable
Page 28: Taking Your Site From Useful to Usable
Page 29: Taking Your Site From Useful to Usable

Typography95% of the info on the web is written language

Oliver Reichenstein

Page 30: Taking Your Site From Useful to Usable

Measure (Line Length)

Page 31: Taking Your Site From Useful to Usable
Page 32: Taking Your Site From Useful to Usable
Page 33: Taking Your Site From Useful to Usable

Leading (Line Height)

Page 34: Taking Your Site From Useful to Usable

In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.

1.5x font size!!

14px font = 21px leading

Page 35: Taking Your Site From Useful to Usable

Spacing

Page 36: Taking Your Site From Useful to Usable

“Space in typography is like time in music”

Robert Bringhurst

Page 37: Taking Your Site From Useful to Usable

Typography In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency. Fonts Do you mean fonts or typefaces? Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial, educational, religious, scientific, spiritual and commercial writing all have differing characteristics and requirements of appropriate typefaces and fonts. For historic material established text typefaces are frequently chosen according to a scheme of historical genre acquired by a long process of accretion, with considerable overlap between historical periods. Contemporary books are more likely to be set with state-of-the-art seriffed "text romans" or "book romans" with design values echoing present-day design arts, which are closely based on traditional models such as those of Nicolas Jenson, Francesco Griffo (a punchcutter who created the model for Aldine typefaces), and

Typography In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.

Fonts Do you mean fonts or typefaces?

Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial, educational, religious, scientific, spiritual and commercial writing all have differing characteristics and requirements of appropriate typefaces and fonts. For historic material established text typefaces are frequently chosen according to a scheme of historical genre acquired by a long process of accretion, with

Page 38: Taking Your Site From Useful to Usable

Whitespace

Page 39: Taking Your Site From Useful to Usable

White Space is Good In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.

Fonts Do you mean fonts or typefaces?

Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial, educational, religious, scientific, spiritual and commercial writing all have differing characteristics and requirements of appropriate typefaces and fonts. For historic material established text typefaces are frequently chosen according to a scheme of historical genre acquired by a long process of accretion,

In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity and transparency.

Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial, educational, religious, scientific, spiritual and

Page 40: Taking Your Site From Useful to Usable

“Once you know how to design and manipulate the space outside, inside, and around your content, you’ll give your readers a head start…”

Mark Boulton, Whitespace

Page 41: Taking Your Site From Useful to Usable
Page 42: Taking Your Site From Useful to Usable

Never put two spaces after a period

Page 43: Taking Your Site From Useful to Usable

Photo by S.Zolkin

Page 44: Taking Your Site From Useful to Usable
Page 45: Taking Your Site From Useful to Usable

Is being usable enough?

Page 46: Taking Your Site From Useful to Usable

Useful Usable

Desirable

Page 47: Taking Your Site From Useful to Usable

What makes a site DESIRABLE?Appeals to emotions

Page 48: Taking Your Site From Useful to Usable

“Experiences create memories for people, and there is a benefit in creating positive experiences and memories for your customers as opposed to negative ones.”

Jodie Moule, Killer UX Design

Page 49: Taking Your Site From Useful to Usable

Who has achieved this?

Page 50: Taking Your Site From Useful to Usable
Page 51: Taking Your Site From Useful to Usable
Page 52: Taking Your Site From Useful to Usable
Page 53: Taking Your Site From Useful to Usable

Everyone has a plan, until they get punched in the face” Mike Tyson

Photo by Keith Abigail

Page 54: Taking Your Site From Useful to Usable

[email protected] @tonynaccarato

Thank You