Product design digest, August 2017

For seven years now I have been publishing regular reviews of recent articles on the topic of interfaces, new tools and collections of patterns, interesting cases and historical stories. From the tapes of several hundred thematic subscriptions, approximately 5% of the worthwhile publications are selected that are interesting to share. Previous materials: April 2010-July 2017 .

Patterns and best practices

Design for the TV Platform
Pascal Potvin describes the main technical and behavioral features of interface design for TVs.

What we mean when we talk about "Product Feels"
Sensible thoughts Mike Walker from Made by Many on how to create the right feeling for the product on the example of their decisions.
')


Designing The Perfect Feature Comparison Table
Vitaly Friedman analyzes in detail the best practices of creating a table of comparison of goods in online stores.



What would Augment Reality? (1-10)
Luke Wroblewski tried to offer potentially useful tasks for the use of augmented reality glasses. True, he adds that they must give enough value to tolerate the inconvenience of too frequent recharging.

The Sad State of Payment Buttons
Explanatory analysis of the variety of buttons of payment systems from John Freeborn. He also sells a template with them.



UX for the Industrial Environment, Part 1
Jon Walter's expert advice on industrial interface design.

7 Really Good Unsubscribe Pages + Preference Centers
Kait Creamer collected examples of good unsubscribe pages and changes in the settings of the frequency and format of such letters.

"Get Started" Stops Users
Aurora Harley and Kim Flaherty of the Nielsen / Norman Group write about a new navigation problem — useless “Get Started” buttons that say nothing about a particular action and often lead the user away from the main path. The problem is aggravated by the popularity of useless first screens with a background image, a logo and a button - instead of turning down, people press the first button.



How to Present Scientific Findings Online
Kate Meyer of Nielsen / Norman Group continues the topic of competent presentation of scientific information on the web.

Back-to-Top Button Design Guidelines
Hoa Loranger from Nielsen / Norman Group gives advice on the proper use of the “up” buttons in mobile and desktop interfaces.

Baymard Institute Studies

• Baymard Institute studied the expectations of users from the rating of goods in online stores . It is important to provide a detailed breakdown of ratings and give a summary.
• Baymard Institute write about how to properly mention the free delivery in online stores .

Design systems and guidelines

Starting a Design System
Excellent memo Nathan Curtis to maintain the design system as a regular project. He not bad describes the key phases from strategy and planning to a pilot launch and planned development.



Continuing the theme:

• Tom Greever gives his principles for describing CSS for a design system . These rules are useful for designers.
• Priyanka Godbole offers its own approach to the definition of indents and sizes in the design system . She shows with an example of typography how to make all distances multiple of 4.
• An excellent memo on the description of animation in design systems from Alla Kholmatova. Probably one of the most intelligent materials on the topic.

Carbon themes
Designer themes in the design system of IBM Carbon. It allows you to replace the base variables and get a new style for the product. How and why did he do it .

Material design

• Google's Mustafa Kurtuldu explains how the Inbox and Keep teams worked with material design guidelines . They did not quite fit the tasks of the product, so I had to move away from them in some places. It is interesting how Google easily does it on its own, and at the same time hacks such similar occurrences upon admission to Google Play.

Android O
The final version of Android O has been released. It gradually comes to Google Pixel and the latest Nexus models.

Bootstrap 4 Beta
Two years later, the Bootstrap 4 beta was released. It has a decent amount of architectural changes.



Creating a Collaborative Style Guide for Designers and Engineers
An interesting approach to typing specifications from Ying Wang, Daniel Vancura and Phill Farrugia is a table with possible combinations of parameters.

macOS Desktop Kit
Facebook design team has laid out design templates for macOS for Sketch.

iOS 11

• Apple published their design guidelines for augmented reality .

Understanding the user

UX Research Findings Designing Marketing Email and Newsletters
Interesting conclusions from the new study of Nielsen / Norman Group about how users relate to mailing lists. For example, the concept of "spam" has changed - now they are increasingly called letters from services to which the user has subscribed.



The other side of empathy
Holly May Mahoney from Stanford d.School on how user researchers maintain psychological comfort and avoid burnout when they often have to delve into other people's problems.

Information architecture, conceptual design, content strategy

Canvas collection - Andi Roberts
Andi Roberts has assembled a large collection of conceptual map templates and models for describing products and users.



User journey mapping: The workshop
David Travis’s sensible step-by-step guide on creating a customer journey map. It shows a simple example of the analysis of activities, which gradually turns into an automated script. Continuing the theme:

• Sarah Gibbons from the Nielsen / Norman Group describes the basics of creating a service blueprint .

Design and design of interface screens

Studio
New tool for prototyping and design of interfaces. Unlike most analogs (read Balsamiq clones), it does not rely on ancient patterns, but offers its own unique solutions.



Sketch 46
Improved work with text (vertical alignment, distance calculations from the baseline), Sketch Cloud is developing (it is easier to share layouts), many small improvements.



Interesting plugins and materials:

• Lingo released a plugin for organizing the UI Kit .
• Wojciech Dobry shows how to work with the Looper plugin .
• Satchel , another plugin for syncing characters in Sketch.
• Another site is a collection of plugins, templates and articles for designers working with Sketch.
• Detailed instructions Zachary Schuessler to create a plugin for Sketch .
• Another plugin to automatically change the width of the buttons, even taking into account the icons .
• The beta version of Sketch 47 has a built-in symbol library that will replace Craft.

Adobe XD

• August update tool . The main focus is on simplifying work with common styles and components.
• A question and answer session with Demian Borba of the Adobe XD team.

PSD to Sketch Design Converter
The creators of Avocode have launched in experimental mode a converter for Photoshop to Sketch. They also prepare converters for Adobe XD. Announcement .



Sketch2AE - Plugin for Sketch and After Effects
Plugin for AfterEffects, allowing you to import layouts from Sketch. Announcement from the Google design team . They also launched the Inspector Spacetime plugin, which shows the animation specification.



Other plugins for After Effects:

• The Bodymovin library learned how to export animation options for Android .
• Interview with Salih Abdul-Karim from Airbnb , who contributed to the Lottie animation tool. A little about how the company uses it.
• Airbnb's design team talks about plans for the Lottie .

Smartmockups - stunning product screenshots without using photoshop
The SmartMockups app helps you quickly show what the interface looks like on your device. There are versions for Windows and Mac.

Gravit designer

• Instructions Christian Krammer to work with the tool on the example of a mobile weather application . Part 2 .

User research and testing, analytics

Cleaning Data From Surveys & Online Research
Jeff Sauro talks about ways to reject user research results if the respondent was dishonest or his survey results were fragmentary. He gives several criteria by which combinations one can catch poor-quality data.

Does the Fidelity of a Prototype Affect Results?
Jeff Sauro has collected scientific publications over the past 20 years on how the development of the prototype affects the results of its testing with users.

Are app reviews worth reading?
John Saito from Dropbox spent a decent amount of time studying reviews in the app store and gives tips on how to draw conclusions about interface problems.



Who needs backup dancers when you can have confidence intervals?
Visual Memo from IBM Stefanie Owens for designers and user researchers on basic statistics.

When to Provide Assistance
Tips Jeff Sauro on how to give the most accurate tips to respondents during user research.

Visual programming and browser design

Framer

• Framer released their first UI Kit Fiber . So far only for iOS.

Bootstrap Studio

• Bootstrap Studio , another tool for website design based on Bootstrap.

New scripts

• A collection of scripts animated transition from the first screen of the page to its continuation .

The New Way Designers Can Test User-Centric Metrics
James Y Rauhut from IBM shows you how Chrome’s built-in site performance, accessibility, and other features work.

Metrics and ROI

How do you set metrics?
Julie Zhuo's tips on choosing product metrics for designers. An interesting example of how Facebook was able to express its current strategy about connecting people more closely through the community, which was expressed in the functionality of the groups, and after that - already started thinking about specific indicators of success.

UX strategy and management

To be a design-led company
Ashleigh Axios talks about how Automattic, the creators of Wordpress, change the design of the company. An interesting look at the UX-strategy, different from the banal "ladders": they divide it into a tactical level, system innovations, and an engine of transformations.



Life inside the design asylum
Arin Bhowmick’s rather detailed story about how the process works in one of the IBM design teams. Useful schedule of work on a standard project.



Continuing the theme:

• Shirley Xu from IBM China’s office shows how the design team uses the WeChat messenger for all public activities (building an HR brand, hiring, content marketing, etc.).
• A story by Leslie Witt, a small business design manager for Intuit, about how the design team works .

UX Meets MBA - What Happens When A Designer Goes To Business School
McLean Donnelly talks about how MBA training helped him in his design work. Interesting examples of calculating ROI design solutions.

The Pop-Up Employer - Build a Team, Do the Job, Say Goodbye
Noam Scheiber describes the increasingly popular format of "temporary teams" that are built for a specific project. They solve the problem within a few weeks or months and then go about their business. So you can collect super-stars, which otherwise would hardly have lingered for a long time.

Troubleshooting Group Ideation - 10 Fixes for More and Better UX Ideas
Kate Meyer of the Nielsen / Norman Group provides tips on improving group dynamics for brainstorm and co-design sessions.

Design Critiques, Part I - A Culture of Effective Feedback
Gerren Lamson from Creative Market describes the standardized design criticism process that is used in the company. Rather meticulous description, which will be continued in the second part.

Methodologies, procedures, standards

How I Stopped Worrying and Learned to Love Design Thinking
Like many experienced interface designers, Christina Wodtke is skeptical about hyip around “design thinking” - in many ways, this is just a good design process that has been around for a long time. But if you accept the fact that people from other professions use the term at random, there are several important additions to the standard process: co-design, hand thinking and iterative modeling of the ideal result. Vlad Golovach recently wrote on the same topic .

Cases

Uber - Perfecting the Pickup
The most elegant detailed story by Simon Pan about the redesign of the taxi call process in Uber. A lot of details about how and why decisions were made, a bunch of introductory information about the actual use of passenger functionality and behavior, and smart interface decisions.



(Re) writing our bot for advertisers
Emily Konouchi from Facebook talks about creating a bot for promotional products. It is interesting how the correct formulation of the phrases and the adjustment of the script increased the involvement and increased the profit.



Designing Twist - The challenge of making teamwork less stressful
Ana Ferreira and Alex Muench talk about working on Twist, the new Todoist service for collaboration at the junction of mail and instant messengers.

How I do Developer UX at Google
Tao Dong from Google talks about how the company improves the interface of tools for developers.

How we designed Foursquare Swarm 5.0
Greg Dougherty talks about redesigning the Swarm application.

Trends

Sayspring - Free Voice Design & Prototyping Software for Alexa and More
Prototyping service for voice interfaces for Amazon Alexa and Google Home. The prototype runs on the device and you can interact with it with voice. A very interesting interview with the founder of the product, Mark Webster , in which he talks about his vision for voice interfaces.



Usability Testing of Spoken Conversational Systems
Susan L. Hura talks about the nuances and challenges of usability testing of voice interfaces. Very useful thoughts on the subject - for example, what to do in a situation where the input method and the output method are the same as in the case of speech.

Designing the User Experience of Machine Learning Systems
In the spring of 2017, the Association for the Advancement of Artificial Intelligence Association held a symposium in Palo Alto (USA). One of the sections was devoted to the use of machine learning for designers. Among her performances is a story by Janin Koch about creative partnership with algorithms . Continuing the theme:

• Janelle Shane generated the names of brands and varieties of craft beer using a neural network . Given the myriad of small breweries, sometimes the coincidence of the names leads to litigation.
• Ed Hess reflects on what it means to be “smart” for a person in the era of artificial intelligence . It is interesting about what skills and abilities are difficult to automate.
• A little more beating The Grid - they say, the second tool from the end in the ranking of site designers .

It's Time to Design Emotionally Intelligent Machines
Sophie Kleber reflects on how to develop emotional intelligence in computers. The topic came up in 1995 with the term "affective computing", and now there are many technological opportunities for this.

Web brutalism

• Interviews with Ukrainian designers who work in the style of brutalism .
• Comic tutorial on designing brutal sites from uxdesign.cc .

Windows 10 will soon include built-in eye tracking
Windows 10 will be able to control the view with a separate eye tracker. It is aimed at people with disabilities, but it also opens up interesting opportunities for experimentation. Continuing the theme:

• Apple bought SMI , a company that specializes in eye tracking.

For general and professional development

DesignBetter.Co - Discover the world's best design practices
InVision launched an educational resource that publishes online books. Now there are three: product design, design thinking and design management. Aarron Walter talks about why the site is running . InVision's mission is to help design teams be more productive and educational materials also work on this. They are also planning a series of podcasts and, apparently, a conference.



100 Questions Designers Always Ask
An excellent list of important things about the product and its design by Jon Moore. Well suited as a checklist for yourself and your team.



Principles for Mobile Design
Steven Hoober describes his principles for working on mobile interfaces.

Cultivating a design career beyond job titles
IBM's Lehel Babos describes his vision of a product designer. It includes specific skills, knowledge of the subject area, an approach to problem solving and empathy.

To those new to design
A series of life tips for designers from Dylan Wilbanks.

The state of design
Parody of a typical article on interface design by Pete Lacey.

People and companies in the industry

A8C DESIGN - Stuff we design in the for you ...
Blog Automattic design team, the creators of Wordpress.

Shopping design studios by large companies

• It turned out a couple of years ago, the cool British UX agency Seren was acquired by Ernst & Young consultants .

Especially for Habr: interview with Alan Kay
Habr's users have asked Alan Kay questions, a Xerox PARC laboratory legend. Many questions concern the history and future of the interfaces.

LinkedIn Design
LinkedIn design team site.

The Success and Failure of Design Inc.
Marc Hemeon tells how the startup search designer Design Inc. was created and why it failed.

Conference proceedings

Leading Design 2017
The Leading Design Digital Product Design Management Conference will be held October 25-27 in London. The topic is hotter than ever - this year already 5 conferences.

Future London Academy 2017 course on UX and product design
The story about the course of Future London Academy on UX and product design 2017. This time I included almost all the notes that I usually do in the course of lectures - I got the longest of the reports. Notes from visits to Moving Brands, Microsoft Lift, Territory, Deliveroo, Moo, Made by Many, NomNom, Monese, Analog Folk, Firedrop, and Andrea Picchi.



To sum up the main impressions of this year, I would highlight this:

• Making complicated is simple is not an easy task, but you can choose a clear segment of users and their problem, which will help launch a simple version of the product. This was told by the creators of Microsoft Paint 3D (hard filter functionality, simplifying interaction with the interface) and Firedrop (focus on one-page promotional sites).
• A “hybrid” designer combining several related skills is important not only in product companies: UX-agencies (Made by Many), less familiar design studios (Territory), and experimental products (Microsoft) came to this point.
• Interesting offices: Microsoft Lift Studios (a mixture of the usual working space and a loft), Made by Many (a chic look and an unusual re-equipment of an industrial facility), Analog Folk (several interesting floors), Moo (they managed to create a huge hangar and improve it).
• Design sprints call any variation on the subject of this methodology, which does not necessarily fall into the five-day format. However, in this case it is just a modern design process of working on a digital product that does not need to be branded.
• Successful brand binding to the interface often involves close co-design with business representatives. This is evident both in the elegant result of Monese, and in the approach with the working sessions of Moving Brands.

Subscribe to the newsletter ! A letter arrives once a month.