“Takeaways for keeping your interface friendly to the friendliest of people you know. Your mother.”
- 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
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.”
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.”
A case study with some nice before and after visuals, ending with the advice that to redesign your product is to redesign your culture.
Some lovely interactions were decided upon to make this product fun and more useful. Includes short screen capture videos.
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.
Also penned by the dubizzle team, these are principles any creative can adopt. I just love them. Go! Read them now!
This is actually a presentation, but I appreciated how well it was sectioned out with nice bite-size tips and comparative examples.
Some thoughts on using hovers (and thoughts on why not) when considering how to use it as a transitional element in responsive design.
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.
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.
A good reminder that combing through your analytics can lead to informed updates. Gives advice on figuring out which analytics metrics are pertinent.
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.
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.”
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.
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.
An ongoing list of beautiful stock photos.
UI Cloud Visual Pattern Library
“…a tool to test and analyze webfonts that you intend to use in your websites or projects.”
“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.”
A succinct idea plus template for narrowing down the what, why, and how to describe and sell your product or service.
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.”
“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.
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.”
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!
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.
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 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.”
A designer listing of designer items you can buy on Amazon.
Fun exercises in what can be accomplished with CSS alone. I’m quite partial to the TARDIS.
Multiple layouts (click through to view the whole series), including links to the Litmus tests.
A simple but lovely animation where the button doubles as a progress bar, with a nice fade to show the content was successfully posted.