Emerging responsive mobile web patterns from Luke Wroblewski.

Bert’s Field Guide to Web Applications

Read about skills and best practices needed to build modern web apps. Learn how to create great user experience.

Overall, I find the design of the guide to inspiring. Love the use of texture to colors. Really feels like I’m looking at a book. Also, the design works well with the responsive layout. Easy to navigate, content is clear and easy to read, beautiful animation, scales well, etc.

Customers view brands as a unified entity, and they expect that brand’s value to be delivered across all channels with an equal degree of integrity… 

…The unifying principles that guide these teams should center around what customers actually need, not what new technologies we want to throw at them. 

well-designed transitions can enhance the user’s experience by imparting a sense of control and easy navigation. We will also discuss how poor transitions can impair the user interface.

In her article for UX Magazine, “Guiding Principles for UX Designers,” Hess outlines 20 guiding principles that pave the way for frictionless engagement.

I’ll share 11 now and more later in the series…

1. Stay out of people’s way…provide an efficient experience.
2. Create a visual hierarchy that matches people’s needs. 
3. Limit distractions and choices.
4. Provide strong information scent.
5. Provide signposts and cues.
6. Provide context.
7. Use constraints appropriately.
8. Make actions reversible.
9. Provide feedback during the experience…design is not a monologue, it’s a conversation.
10. Make a good first impression.
11. Be emotional.

Was excited to check out the Clipboard redesign, but wasn’t able to sign up since the TechCrunch invite expired. Anyhow, I was able to check out their public feed to get a glimpse of what the redesign looked like.

The style pretty much follows the Pinterest grid. I like the ability to change the feed view by grid, item, or list. However, I’m not sure how useful this feature is and if it was really necessary to have.

There were several things that really bothered me though.

1. Yellow alert bar at the bottom of the page is hard to see and felt really awkward. If you want my attention, this should really be at the top of the page. When scrolling, my eyes are glued to the top of the page. I don’t find myself looking up then down frequently, unless I find something interesting enough.
2. Too many titles are being truncated. I wonder why they choose to format the titles this way. Because the boxes in the grid are suppose to be relative to the content, why not wrap the title to the next line? It would definitely make the grid more legible.
3. Fading/cutting off text. I am NOT a fan of this at all! The text becomes difficult to read and doesn’t provide me with sufficient context. This format doesn’t even look interesting, but feels more like something went wrong with the CSS.

Great presentation by Aarron Walter. Also, check out this book Designing for Emotion, part of the A Book Apart series.

When it comes to design, I often find that we’re so focused on creating functional interfaces and following the UI rulebook that we forget about connecting with our users on a more personal level.

When we solely focus on functional aspects of interfaces, we primarily focus on utilitarian goals. For instance, web services such as LinkedIn are utilitarian when it comes to creating a profile. The profile categories are extensive, but generic. Because of this, users are required to spend a lot of time trying to figure out how to complete their profile and make it appear unique. LinkedIn attempts to ease this process by introducing the “Improve Profile” feature which gives their users tips (e.g.: showcase your 1-3 top accomplishments or describe your position at this company).

Yes, LinkedIn’s interface works and is easy to understand on a certain level. However, it may be overwhelming for users because of its utilitarian interface. The interface is impersonal, overwhelming, and boring. Because users are not emotionally invested in the experience, it’s difficult for them to complete or return to their profile.

Facebook on the other hand is taking a unique approach. The article Designers Behind Facebook Timeline described how the company’s designers wanted to create an emotional experience for their users. The theme for designing the timeline was based on the feeling of telling someone a life story and remembering one’s own life. For instance, users can add a “life event” to a timeline, which drills down to various personal categories (e.g.: new job, retirement, new relationship, new child, new pet, etc). The common approach would have been to ask users what happened in a particular year.

By creating an emotional experience, users are more likely to be engaged and invested in what they’re doing because the content suddenly becomes relevant to them.

A good read by Joshua Johnson on what makes Pinterest different from other social bookmarking sites. 

Unlike their competitors, Pinterest was able to identify what users wanted and where they struggled. By understanding their users, Pinterest created a powerful experience that engaged users in a different way.

As Joshua mentioned, Pinterest identified that:

• Users wanted to be able to browse through hundreds of photos…effortlessly
• Pagination is inefficient (e.g.: users are stuck waiting for the page to load, which causes going back and forth to be a pain)
• Infinite scrolling allows users to have an uninterrupted browsing experience
• Great interaction meant nothing if a site didn’t have good content

It’s incredible to understand what makes Pinterest successful from a design perspective. After all, they were not the first company to introduce the concept of social bookmarking.