Designing better user interfaces | Hacker News Reader

Designing better user interfaces

slideshare.net

174 pointsWolfr37 comments

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

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.

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.

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.

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.

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

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.

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

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!

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

He had me at:

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

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

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:

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

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

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.

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

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

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

Recommendation on Slide 64:

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

I believe that violates Google's TOS.

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

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

Thanks for a great presentation!

It's all in the details :)

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

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

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

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.

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.

Reply on news.ycombinator.com