UX:
Start this,
stop that.

Wes Bos
wesbos.com
@wesbos

January 31, 2012

Hey there, I'm Wes Bos

Independent Web UI Designer / Web Developer

I design and build the front end of applications and websites.

Huge JavaScript / CSS3 / HTML5 Fan.

I hang out on Twitter @wesbos

Also on LinkedIn linkedin.com/in/wesbos

#1: Websites should be max 960px wide to accommodate for all screen sizes.

MYTH!

Larger screens means we have more room to work with.

Jan-Dec 2011, Canada (http://gs.statcounter.com/#resolution-CA-monthly-201101-201112-bar)

About 16% show 1000px wide or less

Forget about users on small screens!

... is what would be nice, but we can't!

The answer? Responsive design

Responsive Design is the creation of a website that reacts to the current screen size and delivers an optimal experience for that specific screen.

Most people think responsive web design is just for mobile devices, its not!

Let's take a look at a few examples

More examples:

http://bostonglobe.com/

http://www.barackobama.com/

http://css-tricks.com

http://mediaqueri.es for hundreds more...

#2: People don't scroll / beware of the almighty fold!

On its way out

A long time ago, users on the web were adverse to scrolling, today things have changed.

"The fold" is very hard to define anymore, we already looked at all the different screen sizes

We have the scroll wheel on most mice, all Apple products have inertial scrolling which gets you to the end of the page in 1 flick

b-b-b-but Jakob Nielson

Very smart man who has done his research with data to back it up.

"Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold." - Jakob Nielson

http://www.useit.com/alertbox/scrolling-attention.html

So...

You should always put your most important content at the top of the page

This is especially true for sales and conversion pages

Not as true when users are familiar with your site/app

Whitespace that promotes ease of use/understanding is just as powerful

Don't ruin the design or experience just to cram pixels above a line!

#3: Websites need to look and function the exact same in every browser

hint: people that use old browsers are used to a crappy experience

Let's check http://dowebsitesneedtolookexactlythesameineverybrowser.com/

The web is progressing very quickly and there are new features available to us that will help improve the user's experience

Unfortunately, we don't always use these features because not all browsers support them.

We need to use Progressive Enhancement to improve the experience for those using the latest browsers

Users with older browsers will fall back to a default, regular experience.

Some Examples...

Examples

x-webkit-speech

An attribute that you append to an input to allow Google Chrome's speech-to-text

Drag & Drop API

Ability to drag and drop files into an upload area. Older users get an upload button.

CSS3 rounded corners + other fancy effects

Provides a more visually attractive interface. Older users see square boxes with no transitions

By using progressive enhancement, you'll deliver the best possible experience to your more technical users, which they expect.

#4 - Users read what you tell them to.

MYTH!

Visual cues and feedback when processing AJAX calls or otherwise are super important.

Since the button does not click in and it takes 1-2 seconds for it to beep and spit the transfer out, the user pushes it until something happens.

This is well known in the physical world, thats why all ATMS beep when you press a button

The same rules apply in the online world, let your users know when they should wait by giving them visual cues.

Gmail

WesBos.com

Thats all four! A few things to note...

Don't take my word for it, test with everything from eyeball tracking to heatmaps to my mom.

Iterate on your designs and experience. Lessons learned are very valuable.

Know your user and cater the experience towards them.

Done!

Questions?

@wesbos / LinkedIn

Thanks!