
Designing better user interfaces - Wolfr
http://www.slideshare.net/Wolfr/designing-better-user-interfaces
======
icebraining
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>

~~~
Wolfr
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.

~~~
icebraining
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.

------
ChrisNorstrom
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.

~~~
Wolfr
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
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.

------
user24
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.

~~~
Wolfr
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
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!

~~~
Wolfr
If you scroll down there's a transcript which you can c/p from, but I agree
that it's not ideal.

------
Wolfr
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."

------
ctide
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.

------
Scene_Cast
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
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.

------
mbesto
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...](http://www.slideshare.net/mringlein/designing-for-
mobile-6780442)

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

------
brlewis
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.)

------
Dexec
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
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
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.

------
pefavre
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
I actually hated the static images, as I always tried to drag them. He
convinced me it's a good aproach.

------
joggink
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

------
jcc80
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).

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

------
RyanMcGreal
Recommendation on Slide 64:

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

I believe that violates Google's TOS.

~~~
earnubs
<http://code.google.com/apis/maps/documentation/staticmaps/>

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

------
xlance
Thanks for a great presentation!

It's all in the details :)

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

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

~~~
_pius
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...](http://csswizardry.com/2011/12/measuring-and-sizing-
uis-2011-style/)

