Fortunately, there are many useful books and courses for designers seeking training in UI including several we’ve listed on the UI UX Training home page and in previous posts about UX research and UI and UX design. In this post we identify a range of training UI resources that designers can turn to when seeking ideas or solutions to specific design problems.
In My top 5 must-listen UX/UI podcasts Magica Dimitrova offers a useful summary of a variety of podcasts hosted by experts like Jared Spool and the designers at Google. For training UI purposes:
While the focus of this post is training UI resources many UX principles affect design. For example, the first UX law listed in Laws of UX is the Aesthetic Usability effect. This law states that users perceive aesthetically pleasing design as more usable.
The UX laws of similarity, common region, and connectedness inform layout, placement, choice of color and a variety of other UI design decisions. Study these basic UX laws to enhance your UI designs.
With these UX laws in hand, turn to design principles that apply directly to UI design. 20 Important Design Principles Illustrated
is an infographic that illustrates key principles such as line, scale, balance, contrast, and hierarchy. Each illustration is followed by a brief explanation. For example, the image showing contrast includes three, short bullets:
The illustrations are simple and herein lies their power for new designers and those seeing a quick review of important design principles and how they work.
While dismantling someone else’s design can seem unproductive or even uncharitable, flawed UI designs do offer lessons for designers at all levels. The team at AlexSoft Inc. offers such lessons in Airline Website UX Mistakes and Best Practices: Targeting Economy Travelers.
The subject is design problems with airline sites. The authors identify interaction design issues with localization, dates and flex search, checkout, baggage, mobile, and accessibility. The article is well organized with the UI problems clearly outlined followed by best design practices. For example:
The point is not to pick on the airlines (that’s just a bonus). Rather, examining even a few of the many design flaws cited in this article is a training UI exercise by showing designers how to diagnose and resolve design problems.
Avoiding distraction is a bedrock principle for UX and UI designers. The concern is that any aspect of the design that does not contribute to the user’s current task increases the likelihood that she will abandon the task. Task abandonment often means lost revenue and an unhappy customers.
Designers should not, however, confuse distraction with purposeful motion as Val Head explains in
Animation for UX: How Animation Adds Meaning to UI: “The best UI animations have both purpose and style — they have been purposefully placed in the interface for a user-centered reason, and they have been executed well visually.” Animation can be used to direct the user’s attention. For example:
Sound UI design need not be flashy, but a robust user-centered design can leverage motion where appropriate for the user’s needs in a specific context.
Just as animation can serve a specific design purpose, movement can tell a story. In Use movement to make your design tell great stories, Nick Groeneveld advises using movement to:
In short, properly applied, motion is an effective way to tell a story with design.
In Hover States Adrian Zumbrunnen guides readers through the tricky terrain around hover states. Zumbrunnen begins by explaining that forcing users to hover over hundreds of thumbnails (in an agency portfolio for example) is akin to a treasure hunt.
This does not mean that designers should abandon hover altogether. Even though it’s not available on mobile, hover can still be useful. The trick is to use hover in meaningful ways. For example, subtle feedback, such as changing a button background color in hover state, can increase button affordance.
In terms of training UI resources the point is not obsess over hover states. Rather, this and similar articles show designers how to think through common design problems.