User Experience

Designing User Interfaces for Your Mother

“Takeaways for keeping your interface friendly to the friendliest of people you know. Your mother.”

My Takeaways

  • Keep it simple and compatible with at least IE8
  • Use text over icons
  • Teach users instead of assuming what knowledge they have
  • Several clicks are ok if used to provide positive visual feedback
  • Be responsible with redesigns/upgrades and don’t break every pattern you’ve established all in one go

What is Product Design?

Begins with an overview of various roles in the product development cycle, and then stresses how a true product designer knows the whole process,and describes the various attributes a product designer contributes.

“A good Product Designer knows a bit of animation, prototyping, coding, research, visual and interaction design. They know when to deliver wireframes, and when to deliver pixel perfect mockups. They know when to use animation, and when to prototype. They know how to convincingly communicate their solutions.”

On communicating design

A very relatable essay on how, as user experience designers, we’re not always great at communicating the “why” after we determine the “how”.

“For a developer, clarity on how to execute on the design. For a product manager, the ability to trace the path from the problem statement through the requirements and user stories to the design solution. For a content strategist, an understanding of how the design informs the content needs – and how the content informs the design needs. For executives, the business value of design.”

Re-designing busuu

A case study with some nice before and after visuals, ending with the advice that to redesign your product is to redesign your culture.

Enhancing the UX of dubizzle’s new “place an ad” process

Some lovely interactions were decided upon to make this product fun and more useful. Includes short screen capture videos.

How the Float Label Pattern Started

Linked to in the previous article on dubizzle, this idea was new to me, but I love it and may just write a function to add this to Gravity Forms.

Design Principles

Also penned by the dubizzle team, these are principles any creative can adopt. I just love them. Go! Read them now!

Principles of Mobile Site Design by Google

This is actually a presentation, but I appreciated how well it was sectioned out with nice bite-size tips and comparative examples.

The Responsive Hover Paradigm

Some thoughts on using hovers (and thoughts on why not) when considering how to use it as a transitional element in responsive design.

Interaction Cost

A new term to me, yet a battle I’m deep in the trenches for. Includes a great example of how what on the surface seems simple – looking up a word – actually requires a multitude of steps, including a reasonable amount of cognitive load to achieve the goal.

The Magnifying-Glass Icon in Search Design: Pros and Cons

A topic of very recent relevance for a current project of mine. The article suggests that users do best when at least some of the actual form field is shown on desktop as only an icon can easily be missed in that space. The icon still works well on mobile, due to physical space being more constrained.

Three Uses for Analytics in User-Experience Practice

A good reminder that combing through your analytics can lead to informed updates. Gives advice on figuring out which analytics metrics are pertinent.

Killing Off the Global Navigation: One Trend to Avoid

Another topic currently in debate at my office for a very large site. I believe it’s also important to remember the context of the user at the time they visit the site, plus additional factors such as logged-in status. The article lists various metrics to track if you are experimenting with changing your primary navigation.

Maximize the Content-to-Chrome Ratio, Not the Amount of Content on Screen

Closely related to the global navigation article above, and in direct support, is considering the costs of hiding/minimizing your websites chrome. These costs include need to discover the chrome, and also recall it later. The ratio discussed is largely how to handle large v. small screen.

“Desktop and mobile have different constraints and therefore different usability rules. Trade-offs that designers are forced to make on mobile don’t generalize well to the desktop (and vice versa). Before jumping on the chromeless bandwagon, think twice. Ask yourself: does a reduced chrome interface substantially improve the content-to-chrome ratio? If the answer is no, then make the chrome visible. And remember: for the same design, the answer may be different on different devices.”

Process

North

A lengthy document defining various parts of the process, as well as roles, technology, and everything else that is considered in a large interactive project. Great for sharing with your team, and for pulling from when explaining how a website is built to your clients.

Git for Grown-ups

I’m very new to Git, and I sort of guessed at how to handle the process for my largest project to date. This article is a wonderful overview of how exactly to determine the best workflow for your team and project.

Tools & Resources

Design Triggers from ZURB

A neat, well-organized, visual library of specific “triggers” that help make informed decisions during product design.

Stock photos that don’t suck

An ongoing list of beautiful stock photos.

UI Cloud Visual Pattern Library

Webfont|test

“…a tool to test and analyze webfonts that you intend to use in your websites or projects.”

Resources – a Github repo

“Just a bunch of links that may help make your front end web project go a tad bit smoother. New links added every now and then.”

Content Strategy

Write better walkthroughs with the 3×3 Method

A succinct idea plus template for narrowing down the what, why, and how to describe and sell your product or service.

Future-Ready Content

Written two years ago, but just brilliant, one of my favorites in this roundup. Lots of great questions to ask when assessing content alongside user needs.

“Just as it’s critical to establish site goals before launching into design decisions, you have to know what each type of content is intended to accomplish before you can make decisions about how you need to treat it in different contexts.”

“As we break our content down, analyze its elements, and document the relationships that turn those elements into a meaningful whole, we can begin to create and manage content in a way that endures, wherever the future leads us.”

Deceivingly Strong Information Scent Costs Sales

“Information scent” was another new term to me. The most standout insight to me was that users who follow what seems to be the path to an answer and don’t find it shortly conclude the site doesn’t have the answer at all. Solutions include cross-referencing and clear links and navigation.

Killer User Onboarding Starts With A Story

Tips on learning to understand your users better in order to craft the best onboarding experience.

“…identify the must-have experience that keeps people coming back, and then make sure new users experience it.”

Reduce Bounce Rates: Fight for the Second Click

Tips for analyzing where your traffic came from to better understand their goals v. just identify them as new or returning visitors.

Sidenote: This article encouraged me to add the “Related Topics” section at the end of my posts – and that code is now being reviewed for inclusion in the WordPress plugin repository – so stay tuned for more on that!

How Users Read on the Web

Oldie but goodie, and I’m sure still quite relevant – or at least it matches my web read pattern. Tips for improving your web writing.

Accessibility

Coding Towards Accessibility

Includes tips like checking your interactions using keyboard only, and to not forget :focus and :active when you add-in basic :hover declarations. He also points to Facebook as a guide for common keyboard interactions like arrow keys for navigating galleries, and the esc key to close lightboxes. Finally, don’t forget to consider tab order and add appropriate ARIA tags.

An Alphabet of Accessibility Issues

An eye-opening, quick read of various disabilities, temporary and otherwise, that may prevent your users from experiencing your site as you’ve imagined.

“Robin Christopherson (@usa2day) points out that many of us are only temporarily able-bodied. I’ve seen this to be true. At any given moment, we could be juggling multiple tasks that take an eye or an ear or a finger away. We could be exhausted or sick or stressed. Our need for an accessible web might last a minute, an hour, a day, or the rest of our lives. We never know.”

Misc. Fun

Canopy

A designer listing of designer items you can buy on Amazon.

A Single Div

Fun exercises in what can be accomplished with CSS alone. I’m quite partial to the TARDIS.

An essay on striving for your best work

Open Source Email Templates

Multiple layouts (click through to view the whole series), including links to the Litmus tests.

Prismatic – Post Animation

A simple but lovely animation where the button doubles as a progress bar, with a nice fade to show the content was successfully posted.

Related Topics

Accessibility | Analytics | Content Strategy | CSS | Forms | Product Design | Responsive Design | User Experience