Designing better user interfaces

http://www.slideshare.net/Wolfr/designing-better-user-interfaces

by Wolfr • 14 years ago

174 37 14 years ago

Wolfr8• 14 years ago

This is a presentation about UI design I gave this week, here's the short description:

"Designing better user interfaces sets out to teach interface design by talking through concrete examples: what works, what doesn’t work. A good interface consists of a thousand details done right. This presentation is all about those details."

pefavre• 14 years ago

Good point on the use of maps on mobile. The Maps scrollbar of death™ is evil, and it's a very good practice to have it replaced by a clickable static map.

zalew• 14 years ago

I actually hated the static images, as I always tried to drag them. He convinced me it's a good aproach.

xlance• 14 years ago

Thanks for a great presentation!

It's all in the details :)

jcc80• 14 years ago

Before I even finished going through this I used a tip to increase readability on a blog by putting more space between paragraphs and the next header (slides 106-108).

user24• 14 years ago

I wanted to share my favourite part, when the author was talking about custom UI elements, so I copied the text to share it with you:

> Customishard,andtomecustomisreallysayingthatyouhavemoretimetothinkaboutthebehaviorofaselectboxthanApple’sinteractiondesignteam.Andthatyouhavethedevpowertoﬁxit. Oneveryplatformoutthere.Sosometimesyoujusthavetobepragmaticifyou’rebuildingaproduct

PS: slideshare sucks at exactly this kind of UI.

Wolfr8• 14 years ago

Something went wrong with your formatting here:

"Custom is hard, and to me custom is really saying that you have more time to think about the behavior of a select box than Apple’s interaction design team.

And that you have the dev power to fix it. On every platform out there. So sometimes you just have to be pragmatic if you’re building a product."

beaumartinez• 14 years ago

Thanks for clearing the quote up—but that was exactly the parent post's point—

> SlideShare sucks at exactly this kind of UI

You can't copy and paste its text!

zachrose• 14 years ago

He had me at:

> If you do nothing, the end result is better.

RyanMcGreal2• 14 years ago

The exact same thing happened when I tried to copy text from a slide - the white space didn't copy over.

nickpp• 14 years ago

A presentation on UI that uses px for examples CSS units... shame!

Wolfr8• 14 years ago

Hmm. Good point.

Although using px makes for an easier example, you don't have to mention the scale in which you are sizing your ems. The example was about the spacing, not about the unit used to determine the distance between heading and paragraph.

earnubs2• 14 years ago

All modern browsers zoom the document rather than scale the text, so pixels are now the best way go.

DanBC• 14 years ago

Is there anyway to turn that off? To turn it back to just scaling the text rather than the whole document?

Why is zooming the whole document the preferred method? It feels sub-optimal to me, but maybe I'm missing something.

_pius• 14 years ago

I've seen it persuasively argued that rems and ems with a pixel fallback is the best way to go.

http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011...

mbesto• 14 years ago

Wolfr - This is really good, really appreciate spending the time to document this in a presentation. It's amazing how some of the smallest things get overlooked.

Here is another goodie but specific to mobile UI design:

http://www.slideshare.net/mringlein/designing-for-mobile-678...

Wolfr8• 14 years ago

Yep. nclud is really good. Looking forward to their upcoming redesign ( http://nclud.com/ )

RyanMcGreal2• 14 years ago

Recommendation on Slide 64:

"The map above is just an image that links to google maps"

I believe that violates Google's TOS.

earnubs2• 14 years ago

http://code.google.com/apis/maps/documentation/staticmaps/

Wolfr8• 14 years ago

Yes, good point. I'll fix it and remove the recommendation.

icebraining2• 14 years ago

There's some cosmic irony in putting a presentation about good UI on Slideshare. When a slide doesn't load - which happened to me at least five times already - do they try again? Nope, tells you to reload the page, and hope you memorized the page number or you'll have to go by trial and error.

EDIT: Not the mention the excellent kerning: http://i.imgur.com/1yEya.png

Wolfr8• 14 years ago

I put the same slides on SpeakerDeck. They will be available shortly here: http://speakerdeck.com/u/wolfr . Alternatively you can download the presentation in PDF format from SlideShare too.

I re-saved some of the slides to display a static JPG, the parsing of the PDF seems to cause some problems. I just tested it and could go through the 120 slides without problems now.

It's a bit of a pain, yeah.

icebraining2• 14 years ago

Thank you. The presentation was great, but Slideshare annoys me immensely. And I couldn't download the PDF; for some reason, the grey overlay appeared but nothing else happened. This may be related to NoScript, though, despite having allowed their domains.

quangv• 14 years ago

Anyone can't view slide 102 ? Come On SlideShare! http://i.imm.io/gIwR.png

Scene_Cast• 14 years ago

This got me thinking on the topic of custom UI elements. The problem with those elements is that the programmer ends up rewriting the component, hoping that every little detail matches. I'm not sure about JS, but in some other languages you can make a new element inherit from the UI element class, and then modify its graphics - which effectively solves this problem. With all its flaws, if I recall correctly Flash let you do this - is there a way to do the same thing with JS?

pfraze• 14 years ago

Good point, I don't think there is. I'd expect custom UI tools to be built around the canvas element someday; we might look forward to UI objects then.

brlewis• 14 years ago

The lightbox recommendations from slide 90 are implemented by Photoswipe. I integrated it into OurDoings as you can see here: http://ourdoings.com/brlewis/2011-07

(I assume "clever progressive loading" refers to prefetching.)

ctide• 14 years ago

I was really surprised that G+ was mentioned as a good implementation of photos. Having an onclick event on a bare thumbnail image open the detail view in a lightbox is a horrible abomination of web design. I generally always want to open detail views in other tabs, especially if I'm skimming through a feed.

I feel like G+ has one of the worst implementations of a photo gallery anywhere as a result of this.

ChrisNorstrom• 14 years ago

GOD U#(@&$#!) I HATE slideshows on the internet. I hate hate hate hate them. This was great information packed in a terrible format.

Which leads me to this: Who actually loves slideshows in real life? So why would we like slideshows on the web? It's the same exact problem, the same annoyances. A linear, one by one, hard to scan through, 1 sentence per slide, time consuming, experience.

I'd take a blog with 120 consequent images over a 120 slide slideshow any day. I'm so sorry for my bitching but we need to do something about slides on the web. Can we kill them? We're killing flash and look how much nicer the place is. The web without linear slideshows will be like a park without dog shit.

Wolfr8• 14 years ago

What do you think about this approach: http://koenatclaes.com/ ? (currently on the frontpage there is a slideshow)

I'm thinking of doing my next one like this, it makes more sense from a UI perspective.

justjimmy• 14 years ago

Ever tried doing a video as you go through screens/examples and talk at the same time? Almost like in a tutorial format but from a 'lecture' perspective.

Too• 14 years ago

Combine it with hotkeys to move up/down like j/k on boston bigpicture and it's good :)

Dexec• 14 years ago

As a side note, from slide 49 on he talks about Google Maps embeds, and says if the designer removes the direct link from below the map you need to get the address, copy it, go to maps.google, paste it, search, find the right one, etc.

You do not need to do this. On the embedded Google Map you can just click the Google logo in the bottom left corner and be taken directly to a new maps.google page with the viewpoint centered exactly where the embedded map was. I even verified that it works on the map he was using.

TL;DR: Click the Google logo on an embedded map to view larger.

raquo• 14 years ago

True, and it's even somewhat consistent behavior among embedded stuff (youtube, vimeo, etc.), but in my experience most "normal" people don't know that.

walkon• 14 years ago

I'm not sure about always having a likely option selected by default in a select list. The user may gloss/skim over it without verifying the default value is their desired value. And, with a valid value selected, no validation warning or error is raised. On a very terse form with few inputs, this might be ok, but the example he gave had many inputs and involved money transfers. Seems like a bad idea in that context, especially for users new to that form.

joggink• 14 years ago

Finally somebody who talks about what it's all about instead of just showing meaningless fancy designed websites that die silently because nobody knows how to use them

Designing better user interfaces

Related Stories