Screen shot 2012-03-20 at 8.15.14 PM

Link Glut (Part I): 10 User Experience Design Lessons from Around the Web

1.  “Design the box”, an activity supporting the importance of user experience vision, from UserFocus

  • Agree on the most important message — the key takeaway — that the box should convey.
  • Invent a name for the product that captures the winning idea.
  • Include a picture of the product being used (draw a sketch or take a photo).
  • List the main features of the product.
  • List a handful of benefits that users will get from the product.
  • List the requirements for the operating system (or the operating environment)”

2.  From Kicker Studio‘s Blog.

I love the Why Products Suck series. Wuhoo!  Clear articulation of each element that makes ideas bad. Exceedingly relevant in an “innovation”-driven corporate society.

Products need to demonstrate their differentiators clearly: I’m what you need because there is nothing else like me on the market. I do this one task better than anyone else.” – Dan Saffer, Why Products Suck #7: The Core Concept is Buried in the Features 

Do I have what it takes?

3.  I like this Core 77 article excerpt that gives a little summary of primary possible device manipulation gestures:

  • “One finger can be used to touch, tap, or double tap. One can tap and hold or rotate clockwise or counterclockwise. It can also swipe up, down, left or right. Microsoft allows the thumb to have a special meaning, something that Apple has not yet done. Google uses a long press to call up a menu, although this is seldom actually used by their developers or not even by Google itself.
  • Two fingers can be used to in the same ways as one, as well as to pinch or spread. With Microsoft’s mouse, the location of the tap matters. I suppose you could have a two-finger long press, although to my knowledge nobody yet uses this.
  • Three and four fingers can be used in a variety of ways, some involving the thumb.
  • Some gestures involve movement of the device, using the location orientation, and acceleration sensors present in portable devices. Some gestures involve tapping the case or blowing across the microphone. Some involve tilting, tapping, or rapid shaking of the entire device.
  • With video cameras watching the user, such as with Microsoft’s Kinect, the gestures can be made in three dimensions without contacting anything using fingers, hands, feet, the whole body, or just the head.”

4.  Stop Designing Pages And Start Designing Flows - Smashing Magazine

…users are coming from a low-information source (such as a banner, as opposed to an in-depth blog post), you must design a flow that fills in the gaps of information by providing the user with the data that they need to be converted.

…Use the following methods to keep the user moving down the funnel:

  • Build user confidence by clearly articulating key benefits, backed by easy-to-digest proof points.
  • Streamline the content and design to focus on a clear call to action (in this example, to sign up for an email newsletter).
  • Remove friction at every step. Ask for the minimum amount of information, and reduce the number of fields, extra clicks and page-loading time.
  • Create an enticing hook, an itch that can only be scratched by completing the registration step.

5.  Favorites from the Contrast and Intercom blogs.

Copy the Fit, Not the Features

“Throwing a few million at some big name VCs does not make a start-up hub. It forms through a series of interlinked activities and traits, not all of which can be controlled. Money is just piece of the puzzle; other equally valid pieces are the right climate, the right demographics, the right network, access to talent, and a strong education system.”

Writing an Interface

  1. Who is it for? – New users benefit from more precise instruction… most likely they don’t know where preferences is or what icon represents it.
  2. When they do see this message? – Does this appear as a reaction to a user action … Does it appear immediately? Does the user expect it?
  3. What do they need to know? 
  4. What must they do now, if anything? Often messages have a next step attached; something you’d like the user to do or decide. This should be the logical conclusion of the message.
  5. How is this communicated? Everything that’s good for something is bad for something else.
  6. What tone does this app speak in? This is driven by the brand.

Wireframing for Web Apps

On the meaning of details: “Every colour, every line, every shadow, every gradient. If your atomic unit of wireframes is a rectangle, with solid lines, a colored background and a drop shadow you’re communicating a lot, whether you intended to or not.”

On consistency: “To avoid this, I encourage students to use a limited color set (3-5 grays), 2 fonts, default HTML components, and little else. This might result in ‘dull’ wireframes, but bear in mind all wireframes end up in the trash anyway. They’re not what counts, you’re not delivering a PDF for visitors to ‘ooh’ and ‘aah’ at, you’re desigining software for them to use. A sexy wireframe is a waste of everyones time in the project.”

On speed and exploration: “If you can’t produce concepts quickly, then you’re working at the wrong fidelity. If your wire-framing serves only to deliver a grayscale version of what you’ve already decided you’re building then you’re wasting everyones time.”

On using real content: “Dummy data leads you into a world where headings never wrap, text can justify without looking absurd, photo dimensions and orientations are always convenient, and numbers always fit in their little boxes. The path to UI hell is sign posted ‘Lorem Ipsum’.

On technology “cost”: “If your design includes custom HTML components, novelty size buttons and dropdowns and ajax powered live search, it’s worth remembering that every project has a budget. If you know HTML/CSS/JS, which you should, and you’ve seen what it takes to test a page on IE6/7/8/9 Safari, Chrome and Firefox, you’ll think twice about what wizardry you’ll put in your wireframes.

On not being anal-retentive about deliverables: “If you’ve sketched something on a whiteboard that you’re confident is a good feasible solution, that has real data in it and everyone in the project knows precisely what you mean then there is zero value in re-creating your whiteboard as a wireframe. Don’t be a slave to deliverables.

Have You Tried Talking to Them?

Any question that was ever pondered out loud would make it’s way into my conversations with customers. Rather than guessing, measuring, or analysing, I was asking, every week, for a year.

Aside from getting an in-depth knowledge of our customers and product space, there were useful by-products of this exercise. Firstly people would blog/tweet to say it was great to receive a personal note (Sidenote: Nothing was automated in this process.) Secondly we had many customers offering their logos to be featured on Exceptional homepage (something that benefits both parties). Thirdly I’d regularly do “Meet our customers” blog posts on the Exceptional blog which made even more customers want to talk to us, which fed the cycle nicely.

The Language of Interfaces

Clarity is best achieved through words. Icons are a tricky beast to work with. They can be literal or metaphorical. A magnifying glass can mean zoom, or search. A down arrow can mean download, save, or simply “drop-down”. A back arrow doesn’t say for sure if changes will be saved.

Always Read The Manual

6.  Andy Rutledge’s series on the basics of design. *brain bleeds in awe*

And his reflection on attachment, as a designer/creator (because I think it applies to even only partly creative output – including research findings) and how to wean oneself:

  1. Start clinically. Begin by delving deeply into inventories and constraints—things less apt to compel emotive responses.
  2. Then, focus on users; various relevant user motivations, use cases, interaction models …all balanced against popular convention, new model exploration, and client needs and expectations. Revisit the constraints and note how they may be affected by these examinations.
  3. Move on toward information architecture for the site/app. Revisit constraints and expectations and see how they impact these exercises.
  4. Stay fairly clinical by then getting into page content hierarchies, layout concerns, and the navigation scheme(s). Revisit constraints and expectations.
  5. As elements begin to take shape and concepts begin to solidify, work to maintain a measure of objectivity by searching for ways to shoot holes in your ideas. Better yet, enlist the help of colleagues to find the flaws.
  6. Save look and feel for later portions of the process and make sure that the look/feel works to lend even more context, even more usability, even more brand articulation, rather than just eye-candy or cool factor (things you may be personally enamored of). Revisit constraints and expectations.

7. Cheeky presentation from Leisa Reichelt on Why Most UX is Shite.

8.  How to run a design critique, by Scott Berkun.

9.  15 Free E-books About User Experience and Interface Design

10.  Official Usability, User Experience and User Interface Guidelines from Companies, from Usability Geek.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s