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.
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.
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.
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.
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.
"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."
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."
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.
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?
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.
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:
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.)
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.
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.
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.
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.
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
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).
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.
EDIT: Not the mention the excellent kerning: http://i.imgur.com/1yEya.png