all right so I am going to be talking
how to make your website not ugly which
I think everyone can agree is a good
thing yeah okay all right so a little
bit about me I'm a former journalist I
know there's actually a lot of former
journalists here think okay yeah I was
kind of expecting some noise and I had a
stint as a print designer I've started
doing a little bit of web design but my
background is primarily as a software
developer ten-forward consulting and
medicine I also have a second to
somebody we have some Guinan stickers
because we're named for the bar in the
enterprise so if anybody wants the
guidance sticker come find me afterwards
ten-forward we primarily work with
startups so a lot of times they don't
have a budget for a designer or for us
to do any kind of in-house design and so
this talk kind of originated because
there was a lot of stuff that I knew we
should be doing but we didn't have
anyone who had the existing knowledge so
I kind of had to figure it out myself
and then fun fact I read the second book
of the storm white archives in one day
if anybody's a Brandon Sanderson fan
yeah it's a thousand eighty eight pages
I took a day off of work when I got it
because I knew I wouldn't be able to put
it down all right so we're gonna look at
a real website from 1996 Rae right
pretty attractive this is a senator's
website by the way this isn't just like
some kid in their basement like I was
making a terrible website this is like a
congressional website so who thinks that
this is well-designed okay okay I made
this this look is kind of like coming
back a little bit god forbid but right I
mean most of us look at this and we
realize yeah this could probably be
improved so the point of that is you
know more than you think you do right so
even if you don't have any design
experience or when consider yourself
creative you can at least recognize when
something could be improved or when it's
when it's really not working but why do
we care right doesn't it matter more
that what we're building works well so
usability is a big one
it doesn't really matter if everything
works well if people don't know how to
find it
right credibility is another big one so
there's a study from Stanford University
they had ten different categories and
they asked people to rank the categories
by which one they felt gave them the
most trust in a website on first visit
46% of people said the visual design was
the most important that was the the
category that had the most votes
functionality was only 8% so especially
when we're first coming to his site we
don't really care how it works is we
haven't gotten there yet we want to know
we want to be able to trust the website
and then interest is the last one so
this varies really widely depending on
what study you look at but it seems that
it's from about 10 seconds to 50
milliseconds is how long we have to
convince someone to stay on the site
before they bounce so maybe you're
thinking okay I'll buy it I'm listening
see we have to say disclaimer of course
there are always exceptions right so
everything I'm going to talk about today
are sort of broad guidelines depending
on the site or applications target
demographics the intended use you know
these are not going to necessarily apply
but they found in Sonya sonoran group
does a ton with UX and they revisited
some of their major findings from like
ten years ago twenty years ago to see
does is this still truth Suzy still
holed up and they found that usability
guidelines tend to be very durable so
the idea being that design trends and
patterns definitely change over time but
human behavior does not as anyone who
has dated an ill-suited partner knows
all too well so a lot to cover I'm going
to speak pretty fast because I have a
lot of things I want to get out and I
don't have a ton of time but you can
follow along I have my slides up online
and I'll have a link at the bottom and
I'll have it later
so yeah all right so first we're going
to look at words and how we think about
text as like a visual element then
images when do we use them what kind do
we use how do we use them in the right
way and then design as kind of an
overall picture how do we think about
design from a lot
Cole perspective alright first we want
to make speech visual so there was his
28 2008 eye tracking study and they
found that visitors only read 20% of
text context on content on average so
how can we improve that first we want to
make sure that our text can breathe so
lengths again depending on what study
you look at there's a lot of different
opinions about this but broadly speaking
people prefer my links that are shorter
so 50 60 characters per line but they
actually read faster at longer links so
the New York Times for example which I
use them for a lot of examples in here I
mean they're a site that's literally
meant for people to be reading giant
blocks of text and they keep their line
length at right around like 75 so kind
of anywhere between 60 and 100 is fine
again depending on what part of a site
it is but going longer than 100 people
start to they don't follow all the way
to the end of the line line height we
usually do about 1.4 again this depends
on what your typeface is this is not 1.4
pixels or EMS it's 1.4 times the font
size of the element and that tends to
you know again generally speaking that
works really well and then padding so we
do at least like 15 pixels because
especially if you have like columns of
text if the columns are too close people
just read straight across if they're too
far away people get to the end they
don't know where they're supposed to go
next so just making sure that you have
ample space around your text so that it
it's easy to follow the flow of what
you're trying to do so here's an example
of maybe not how to do it but you know
the lines are really close together you
can see that the text from the different
lines are actually touching each other
it's really wide I just look at this and
I immediately want to go check out
something else and here's how they
actually do it so this again is from The
Times so there's plenty of spacing but
it doesn't feel like there are gaps we
can see that long column of white on the
side we're going to talk about that a
little bit later but like white spaces
your friend
it is not wasted all right and then it
has to be legible so contrast
there's a great website that I always
check all of my color combinations on
its web a morgue they have a contrast
checker and it checks with the wk
standard so making sure that it's it's
compliant with accessible standards and
this is important because just because
you can read something doesn't mean that
everyone can read it right I think about
1 in 10 people in the US have some kind
of disability and that's a lot of people
and so a very easy way to make it easier
for folks to consume your content is to
just make sure that it's the contrast is
good size 16 pixel is as a browser
default for a reason especially as we
have an aging population who maybe is
having you know vision issues like it's
really important that your text is not
too small and again this depends on the
type face so we just redesigned we're
redesigning our site and some of our
text we actually put the default at 20
because it just tends to be a smaller
more condensed typeface so who can read
this oh come on
I want your eyesight and I clearly could
not read that and then we've here right
and this still would not pass those
those standards for accessibility but
it's way better all right so then we
want to make our text scannable so like
we said earlier that study from 2008
people only read about 20% of text
content we lose people very quickly when
it's a text heavy page and so making
sure that they are able to scan through
everything will allow us to keep people
longer and I'm going to talk about this
a little bit later in the presentation
some ways to do this highlight the key
content using subheads
and this I thought was really
interesting we actually read faster when
text has a mix of uppercase and
lowercase letters and it's not because
that inherently is easier to read we're
just trained to read that and so when we
see all caps are all lowercase it
actually takes us you know split seconds
longer to be able to process that
content well it would list another great
way to do it so this is the site where I
just kind of stripped out a lot of their
styling and if I come here I just see a
giant block of text I don't really know
what it's about
I have to I know that I have to invest
at least a few minutes to figure out
what they're even talking about to see
if I'm interested in it and this is what
it actually looks like so we can see
it's very clear what the title is right
that grabs my attention immediately
they have keywords at the top so I can
look at the keywords and see okay am i
interested in this is this worth my time
they pull out the first paragraph and
make it bigger they have sub heads so
maybe I see okay I know a little bit
about people scanning websites but maybe
there's something new in here that I
don't know about so I'm gonna skim
through the sub heads see if one catches
my eye oh I didn't know about you know
this new study let me read that
paragraph all right keep decoration to a
minimum so this is something that I
think is is it's more attempting to not
do this as there are so many different
you know like google fonts or so many
different free typefaces that we can use
and it's it's easy especially for like
clients that we work with to be like oh
we want like six different typefaces
no not gonna do that and here's why we
usually pick like two or three so maybe
we have one typeface that's dedicated to
our headers and sub headers and one
that's for body text color is again so
two to three and the reason for this is
because when you have too many typefaces
or too many colors our brain
instinctively assumes that it's an ad
and we just completely skip that we
don't even look at that content we just
skip it completely so again kind of
using more complex fonts or typefaces
for the headers where the text is
probably bigger and then your simpler
ones for the body text which is probably
going to be a little bit smaller so I'm
not making fun of this website and
actually felt much better
about using this example in this
presentation because I saw that they
redesigned it and it's much better now
but this is what it used to look like
and when I look at that site right first
of all I don't know where to go because
there's a lot of different elements that
are competing for my attention the nav
isn't kind of an unusual spot that's not
where I would instinctively go to look
for navigation I assumed that all of
those squares at the bottom were ads
because they all have different
typefaces the colors are all different
font sizes all different and those are
actually just like pages on this site
there like programs that the church has
so
this is a better example like every time
that I go to this slide I just kind of
like yes this is just nice it's very
clear the navigation is where I expect
it to be it's clear what page I'm on I
know what pattern I know at a glance
what pattern this site is using to
disseminate information and a big thing
that I'm going to talk about is how you
want to make people learn one pattern
and stick to it right we want to make
using our application or website as
painless as possible okay we recap quick
so we want to think about speech as a
visual element within a website or
application so give it plenty of
breathing room make sure it's legible
make it scannable so that people can
skip around to what they're interested
in and keep it simple not so many colors
or too many typefaces alright
we want to use our images appropriately
and early I don't think there's any
situation where this image is not
appropriate but that's another
conversation so icons a company that's
actually called user testing which is a
little too on the nose but they studied
190 icons in 2015 and they asked people
what they asked people to predict what
would happen when they clicked on a
particular icon so they found that if
they gave them icons that were unique to
an application so for example Twitter
has the little like feather thing that
you click if you want to write a message
that one everybody knows but exempt you
know icons like that that are unique to
a specific application if they did have
a label only 34% of people knew what it
was going to do so that's like a third
of people so 66 or some people guess
wrong if they use more generic Universal
icons again without a label 60 percent
of people guess what it was going to do
correctly and if they put a label on
those more generic icons than 80 percent
of people got it right but that's still
you know one-fifth people didn't know it
was going to happen when they click that
icon so the idea is kind of there are
maybe three like truly Universal icons
it just doesn't exist and especially if
you have an application that is used by
an international audience I mean you
just you cannot assume that people know
what something is going to do
so yeah labels are the rule not the
exception they work best often in a
navigation or a menu setting that's kind
of again where we expect them as well or
if they're if you use them for
decoration not as part of the actual
like functionality and then avoiding
icons with conflicting meanings so I
want everyone to think what icon would
you choose to mean share just give
people a second okay these are all icons
that have been used in software to mean
sure they all look completely different
from each other some of them I really
don't understand why they went that
particular route but that just kind of
goes to show right there there really
are very few Universal icons and you
know some people have come up to me
after this talking like well what if we
put hover text on it well hover text
doesn't work on mobile for one and also
that is creating extra work for the user
right we want to make it easy for people
to interact with our content so if I
have to admit if I have to put invisible
work into understanding how something
works
I'm already just you know irate by that
experience and not really having a good
time with it all right so then images
who has heard of banner blindness a
couple people okay so this is back in
the days when I was building my Buffy
the Vampire Slayer website and pretty
much all sites had that like flashing
rectangular ad right at the top if you
remember that that was so ubiquitous
that we started to instinctively ignore
that section and we'll see that again in
a little bit we just literally don't
even look there now kind of realizing
this this banner blindness people have
started to put their ads elsewhere right
so how many times when you're reading
through like a news article and then it
says like content continues after the ad
and there's just an ad right in the
middle of the text right that's kind of
the new one of the new patterns but we
skip that too you know I find that I
notice what that is and I just don't
even look at it I just skip down to the
rest of the text so we we adjust for the
patterns of ad placements so this ties
into you know basic UX because you
want to be aware of that right so don't
put key content in these areas that we
expect to be ads because we literally
don't see them we just skip right past
it make sure that your images are
integrating images or graphics are
integrated with your content right so if
if something is clearly a stock photo
that brings down credibility if it seems
not related to the content we again kind
of assume it's an ad and it's just
distracting so so news a Norman group
they found that the first thing that
users are drawn to on a website is
actually plain text then faces so if you
have like one of our clients had a blog
and they kept wanting us to put more
images into their blog just for the sake
of having you but it's like all we just
want to break up the text let's put some
images in and we had to come back and
argue like just getting a random stock
image of a flag like actually detracts
from your content right that makes it
look more like an ad that doesn't mean
people want to read it so making sure
that our images are informative and/or
relevant right so maybe it's a picture
of the company team or someone using the
app or like a workflow image you know
something that is actually related to
the text that ties it together instead
of being distracting people have maybe
seen this before this one's pretty
popular
they have also redone their website a
little bit if you go to links cars.com
it's a little better I stuck with the
old one because it's worse and also
because they now have a little graphic
on the top that says that even with that
terrible website they're still like the
number one best-selling car dealer in
the UK which is true there's like very
successful but I think they you know
this is the exception that proves the
rule it's just very distracting I'm not
entirely sure what they're doing because
you don't really see any cars here so
yeah maybe maybe not where we want to go
on the other hand this kind of takes off
all those boxes right the content it
might be a stock image but at least it's
very related to the content of the
article it's integrated directly because
we have the title going over the image
so we can see that they are connected
they are part of the same thing
not like a standalone where we might
expect you to be an ad and it's simple
its effective alright so another recap
we want to think about speech from a
visual perspective right so how do we
make sure that we can read it that it
has enough space that it's easy for
people to to connect with we want to use
our images appropriately so icons should
like seriously always have a label one
thing I like to do if I'm gonna use an
icon especially a unique icon for an
application is I go around to everyone
in my office
show them the icon ask them you know
within the context of the appliques and
if they don't all give me the correct
answer then I don't use it I go back to
the drawing board
alright seven to ten I'm going to think
illogically about our design this thing
we we think logically about anything
else that we do
so patterns patterns are your best
friend if you are so for example
something that happens a lot in our
office is we have an existing site that
maybe we had a designer come and do and
we use a template or you know whatever
the case is and the client wants to add
a new page and so we end up building
that page from scratch and we just base
it off the existing
design so we look at what are the
patterns that we've been using already
right do we have a certain kind of
column that we like to use do we have
like color banners that go all the way
across that we can use one thing that
our a designer friend of mine said once
was like there are literally a billion
websites so just find one you like and
kind of copy it because for the most
part what we're doing you know again
this is where that's sort of like well
not all websites if you're building
something that that needs to have a
unique design it needs to be really
trendy and eye-catching like obviously
you want to do something unique but in
the most kit in most cases we just want
something that looks good so quality
Trump's originality in most cases find
something that works use it as a model
right just focus on the patterns I'm
making sure everything is consistent
right that idea of like teaching our
user one pattern sticking to it so that
it's very easy for them to navigate
through the site or application find
what they're looking for so this is
actually one of my favorite bars in
Madison
this is our old site they got a new one
but they keep a link to that keep the
old one up for like nostalgia but this
was their real website until maybe a
year ago and it's completely useless
right I know nothing about the bar I
have no idea how all those st. Patty's
Day pictures are because they've been up
there forever weird things are
highlighted weird things are bolded they
have multiple colors some things that
are underlined aren't actually links
it's just kind of a hot mess
here on the other hand we have I mean
it's this is like just patterns right
everything is in patterns we have our
columns we have our navigation on the
side we can see the filters everything
is structured the same the squares are
all the same size it's very easy to come
to this having never used it before and
be able to find what you want alright
who's heard of progressive disclosure a
couple people okay so progressive
disclosure is the idea of not
overwhelming users with content but
making it easy for them to find what
they're looking for so we're gonna talk
about some ways to do that who is
familiar with the F shape reading
pattern more people okay so this is one
of those ones I mentioned earlier the
durability of usability guidelines and
this is one that they went and revisited
he goes 20 years later and they found
that it's still true
so it's this right the red is where we
spend the most time looking at a site
and then the blue and clears always been
the least time so we can see there's
this sort of broad F shape so we start
in the top I don't know left and right
left corner and then we kind of cascade
down and again you can see that the
intensity of our consumption of content
drastically like tapers off the farther
down that we get they found that for
languages that are flipped from English
so where you read the opposite direction
the FC pattern is still there it's just
flipped kind of like you would expect so
this is this is kind of a universal
behavior so top to bottom important to
less important right they found that in
2014 they found that a hundred and fifty
six percent more people
see you know sort of like above the fold
so in newspapers the above the fold was
literally above the fold right if you
were holding a physical newspaper in
your hands they put the eye-catching
stuff at the top because they wanted you
to be invested enough that you would
bother to actually open the newspaper
and that same behavior right human
behavior does not change we just ported
that behavior over to the web but
instead of a fold we have a scroll so
it's kind of like before the scroll so
100 see 6 percent more people look at
the content before the scroll so what we
want to make sure that we are we are
drawing people at the top so really
getting our our key concepts at the top
of the page and then avoid putting
content in this traditional ad area so
if we go back to look at here right we
can see that we don't even look at the
top for the most part that whole top
section we don't even look at part of
that is banner blind as part of that is
that we now kind of expect that a
navigation is there and we first get to
a site we're not necessarily interested
in the navigation right we want to
figure out well what are they about
do I care and if I care then maybe I
want to go click for something specific
so here's a good example right again
from the New York Times so we can see
that in that area that we don't look at
they just put other stories it's like if
we click on those great if we don't not
the end of the world they have a nice
big title I know exactly what this is
about the image is like very relevant to
the content
I have subheads so I can kind of scroll
through see what I'm looking for they
understand that you know and you can see
there's almost an F on this page right
they understand the way that we are
going to interact with the content and
so they decide with a bunch of
whitespace there because we're not
looking there anyway like why bother
putting something there alright so again
with consistency right if there's one
thing you leave with today it's a
consistency in patterns in design are
like your best friend so links and
buttons right idea if a button has a
shadow one place it should probably have
a shadow all the time forms should have
the same color if you have like alerts
the red should be the same color tables
should look the same your header
typefaces and size it should be the same
and now you know we have some sites
where that are very very data heavy so
like for the University so they're just
literally looking at data from research
projects and so tables for like one
category you might have like a different
color for the header right so that they
can use that it as a visual cue to see
what they're looking at but otherwise
everything is the same because we want
to make it again we want to make it easy
for people to find what they're looking
for so which part of this text do you
think is the link is that the green or
is it the underlined yeah no one
answered because like you have no I'm
going unless you click on something is
it you know it's the green maybe where
you hover and it gives you that sort of
weird definition or it wants you to
click somewhere else to go somewhere I
look at this and I have to stop and
think and what I don't want is to think
about how the content works
I want to you know ideally I'm thinking
about the content itself and like you
know it's thoughtful and deep and
whatever but I don't want to think about
how to interact with it so functionality
is a part of design the structure so I'm
a full site developer so I do beckon in
rails and then front-end and on a new
project or even if I'm just adding to
the architecture of an existing product
I think about how the data models can
have a direct impact on the user facing
implementation so I sit then I think
okay what am I likely building out on
the front end in the interface that
someone's gonna use how can I make sure
that I am sort of preparing for that to
be a you know like a cooperative
misadventure which is like kind of a
business phony word but you know what I
mean like how can I think about how they
work together
bugs Trump Beauty right so we saw that
46% of people saying that visual design
is the most important for building
credibility versus 8% for functionality
but if you decide to stay on a site
because of the visual design and then
the links are all broken in the forms
don't submit you're not going to stay
anyway
right so this I really like this quote
design is where science and art break
even so the idea that you know I think a
lot of people when they hear visual
design they think
that it's it's not really you know
especially if you're more of a back in
partner but they think it's not really
relevant to what I'm doing right the
code is one thing the visual design is
another thing but they all fit together
and impact each other and if we're aware
of that then we can like really build
kickass all right final recap so we
want to think about our words as a
visual construct right how do we make
sure that they are able to be read
easily and quickly images icons should
always have labels photos and graphics
should be integrated with the content
relevant informative stock images are
not your friend because we look at text
first that's what we're drawn to then we
look at faces random flag pictures are
just like whatever and then how do we
think about design from a logical
perspective right so using patterns and
being consistent keeping in mind that F
shape reading pattern and how that
affects where we put what content being
consistent and then of course making
sure that it works so some additional
information a bunch of citations that
you can check out for where I got all
this information and that's all I have
so thank you
[Applause]