taking your site from useful to usable
DESCRIPTION
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.TRANSCRIPT
![Page 1: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/1.jpg)
Taking Your Site From Useful to Usable
![Page 2: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/2.jpg)
@tonynaccarato
Tony NaccaratoUser Experience Designer
![Page 3: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/3.jpg)
Photo by slworking2
![Page 4: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/4.jpg)
Photo by Alejandro Escamilla
![Page 5: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/5.jpg)
WHY?
![Page 6: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/6.jpg)
Useful Usable
Desirable
![Page 7: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/7.jpg)
What makes a site USEFUL?Content that offers value to the user
![Page 8: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/8.jpg)
A Website with no content?
Photo by Sebastiaan ter Burg
![Page 9: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/9.jpg)
Is having a useful website enough?
![Page 10: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/10.jpg)
![Page 11: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/11.jpg)
![Page 12: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/12.jpg)
![Page 13: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/13.jpg)
Useful Usable
Desirable
![Page 14: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/14.jpg)
What makes a site USABLE?Easy access to the valuable content
![Page 15: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/15.jpg)
![Page 16: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/16.jpg)
The Secret Lives of LinksLinks need to communicate
Jared Spool
![Page 17: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/17.jpg)
![Page 18: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/18.jpg)
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](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/19.jpg)
TEST IT
![Page 20: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/20.jpg)
Test ItThe earlier the better
![Page 21: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/21.jpg)
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](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/22.jpg)
85% 99%
![Page 23: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/23.jpg)
![Page 24: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/24.jpg)
AffordanceCharacteristics of an object influence its function
![Page 25: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/25.jpg)
Photo by Jeremy Page
![Page 26: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/26.jpg)
Icons
![Page 27: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/27.jpg)
![Page 28: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/28.jpg)
![Page 29: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/29.jpg)
Typography95% of the info on the web is written language
Oliver Reichenstein
![Page 30: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/30.jpg)
Measure (Line Length)
![Page 31: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/31.jpg)
![Page 32: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/32.jpg)
![Page 33: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/33.jpg)
Leading (Line Height)
![Page 34: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/34.jpg)
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](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/35.jpg)
Spacing
![Page 36: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/36.jpg)
“Space in typography is like time in music”
Robert Bringhurst
![Page 37: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/37.jpg)
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](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/38.jpg)
Whitespace
![Page 39: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/39.jpg)
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](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/40.jpg)
“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](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/41.jpg)
![Page 42: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/42.jpg)
Never put two spaces after a period
![Page 43: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/43.jpg)
Photo by S.Zolkin
![Page 44: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/44.jpg)
![Page 45: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/45.jpg)
Is being usable enough?
![Page 46: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/46.jpg)
Useful Usable
Desirable
![Page 47: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/47.jpg)
What makes a site DESIRABLE?Appeals to emotions
![Page 48: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/48.jpg)
“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](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/49.jpg)
Who has achieved this?
![Page 50: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/50.jpg)
![Page 51: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/51.jpg)
![Page 52: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/52.jpg)
![Page 53: Taking Your Site From Useful to Usable](https://reader036.vdocuments.us/reader036/viewer/2022081403/548f860eb47959640d8b4f08/html5/thumbnails/53.jpg)
Everyone has a plan, until they get punched in the face” Mike Tyson
“
Photo by Keith Abigail