5 ms·
Designing better user interfaces
- mbesto 15y agoWolfr - 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-6780442 http://www.slideshare.net/mringlein/designing-for-mobile-678...
- Wolfr 15y agoYep. nclud is really good. Looking forward to their upcoming redesign ( http://nclud.com/ http://nclud.com/ )
- nickpp 15y agoA presentation on UI that uses px for examples CSS units... shame!
- Wolfr 15y agoHmm. 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.
- earnubs 15y agoAll modern browsers zoom the document rather than scale the text, so pixels are now the best way go.
- DanBC 15y agoIs 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 15y agoI'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-style/ http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011...
- Wolfr 15y agoThis 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 15y agoGood 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 15y agoI actually hated the static images, as I always tried to drag them. He convinced me it's a good aproach.
- xlance 15y agoThanks for a great presentation! It's all in the details :)
- jcc80 15y agoBefore 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 15y agoI 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.Andthatyouhavethedevpowertofixit. Oneveryplatformoutthere.Sosometimesyoujusthavetobepragmaticifyou’rebuildingaproduct PS: slideshare sucks at exactly this kind of UI.
- Wolfr 15y agoSomething 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 15y agoThanks 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 15y agoIf you scroll down there's a transcript which you can c/p from, but I agree that it's not ideal.
- zachrose 15y agoHe had me at: > If you do nothing, the end result is better.
- RyanMcGreal 15y agoThe exact same thing happened when I tried to copy text from a slide - the white space didn't copy over.
- RyanMcGreal 15y agoRecommendation on Slide 64: "The map above is just an image that links to google maps" I believe that violates Google's TOS.
- icebraining 15y agoThere'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 http://i.imgur.com/1yEya.png
- Wolfr 15y agoI put the same slides on SpeakerDeck. They will be available shortly here: http://speakerdeck.com/u/wolfr 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.
- deleted 15y ago[deleted]
- icebraining 15y agoThank 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 15y agoAnyone can't view slide 102 ? Come On SlideShare! http://i.imm.io/gIwR.png http://i.imm.io/gIwR.png
- Scene_Cast 15y agoThis 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 15y agoGood 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 15y agoThe 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 http://ourdoings.com/brlewis/2011-07 (I assume "clever progressive loading" refers to prefetching.)
- ctide 15y agoI 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 15y agoGOD 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 15y agoWhat do you think about this approach: http://koenatclaes.com/ 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.
- Dexec 15y agoAs 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 15y agoTrue, and it's even somewhat consistent behavior among embedded stuff (youtube, vimeo, etc.), but in my experience most "normal" people don't know that.
- deleted 15y ago[deleted]
- walkon 15y agoI'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 15y agoFinally 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