Product Design Digest February 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-January 2017 .

Patterns and best practices

Form Design for Complex Applications
An overview of form display patterns in complex web applications from Andrew Coyle. Translation .
')


Do responsive sites?
Viget's Kevin Vigneault writes about the importance of remembering the height of responsive websites. Often a simple arrangement of blocks under each other leads to a huge number of scrolls.



Is there a standard sharinga icon?

• Microsoft abandoned its “share” icon in favor of Apple’s previous decision . They conducted a study and saw that it was best recognized.

Baymard institute

• Baymard updated their study of the main pages and categories in online stores . The article highlights the changes in the market.

Guidelines for platforms and companies

Patterns ≠ Components
Nathan Curtis describes the difference between patterns and components. The article also has a good list of books and articles that influenced the development of the ideology of modular design.



Continuing the theme:

• Dominic Nguyen writes about how to build live guidelines . He leads ready-made frameworks that allow to raise the component viewer on React and other platforms.
• Swanky Docs , another framework for creating live guidelines.
• Nathan Curtis writes about the features of creating and describing versions of an interface on a dark background . EightShapes also laid out a simple web service for checking color combinations for accessibility - you drive in variables of your design system, you see what needs to be corrected in them.
• Optimizely's Daniel O'Connor tells how the company's design system gradually evolved .
• Colm Tuite perfectly described the first step of working on a design system - the definition of key variables. He is working on his Bantam CSS framework .

Design Principles Behind Great Products
Anton Badashov from Rambler & Co analyzed the design principles of famous web services.



Continuing the theme:

• An interesting example of a visual representation of the design principles of the Degreed .

Material design

• Teo Yu Siang deals with Android navigation problems . A lot of navigation elements, including the relatively recently added bottom panel, do not have text labels. Yes, there is often no room on the screen for this, but the same iOS uses signatures in the bottom panel.

Android Wear

• A small review of Android Wear 2.0 , which finally comes out in the first half of February. Gallery of interface screens . Interestingly, Google has managed to make a compact version of its machine learning engine, which allows you to use contextual quick answers . Perhaps this is one of the things that will make smart watches a little more useful.

Understanding the user

Models of media consumption. What people read, why, when and how (PDF)
A team of media projects and the Mail.Ru Group UX-lab conducted a study of how people read the media. This is a qualitative, not quantitative, research — they simply answer the question “how it is”, collect different behaviors and study them deeply. There is no task to understand how often or typical this behavior is, the main thing is to comprehensively describe the cases found. At the same time, quantitative data from the Mediator service analysts confirm the findings of the study.



Scott Belsky
An sensible interview with Scott Belsky, the creator of Behance and a partner in venture capital fund Benchmark Capital. The first half is common, the second reveals two of his product development concepts - the “first mile”, relating to onboarding , and the staging of attracting users .



Jobs-to-be-done

• Jeff Sauro recommends user segmentation by needs and refers to the jobs to be done method .

Speaking up for Experiences
Excellent presentation by Stephen Anderson about what interface designers can learn from game designers. Many useful thoughts on how to view user interaction with the product in a more engaging way.

Information architecture, conceptual design, content strategy

UCDtoolbox - Find and learn methods for UCD
Student project UCD Toolbox collects interface design methods into a single database with selection tools. It is completely redesigned and allows you to select design methods and research for a specific situation.



Five Models for Making Systems
Christina Wodtke describes the difference between mind maps, concept maps, system maps, and mental and conceptual models.

Design and design of interface screens

Motion design handovers made easy
Paul van Oijen offers an approach to interface animation specification for transmission to developers. He lays out the basic transformations with objects and the dynamics of their changes. Partially this task can be solved by plug-ins for AfterEffects, which export animation parameters to JSON, but the format described in the article is perfect for design systems.



Getting Started With VR Interface Design
Sam Applebee and Alex Deruette of Kickpush show how to prototype virtual reality interfaces in Sketch.



Continuing the theme:

• Walkthrough Apurva Shah from Capital ONE on how to create 360 ​​videos . He mentions a funny idea - recording ethnographic studies on such a camera in order to better understand the situation in the workplace or at home with the user.
• An experiment combining augmented and virtual reality with a bunch of Microsoft Hololens and HTC Vive .

Sketch

• Lunacy, Sketch for Windows Icons8 layout viewer .
• A specific, but interesting way to make components with responsive texts from Yaron Tamuz .
• Template for creating process diagrams .
• A series of tips on working with Sketch by Jon Moore .
• Continuation of the article Jon Moore about the creation of complex characters . Shows how to make different button states. Although it does not solve the main task - automatic adjustment of the width of the text. A state is better described in the design system.
• Auto Layout develops the stack groups feature and in the last update uses flexbox mechanics for adaptive groups of elements . Alan Roy recorded a detailed step-by-step video showing how to build such an adaptive grid.

Craft

• The InVision Labs team launched Craft Freehand - the opportunity to discuss layouts with managers and developers. A slice of the main Invision is now in Craft itself.

Figma

• Figma develops components - it became easier to synchronize them between the team .

Invision

• A second version of the accompanying mobile application has been released with improved prototype discussion capabilities .

Adobe After Effects

• Airbnb's Lottie library based on BodyMovin, which allows you to export animation from AfterEffects to JSON, and then import it into applications on native Android and iOS, or based on ReactNative. Announcement with a little background and a description of the goals .

Marvel

• Marvel has released a plugin for Sketch, which allows you to watch changes in the prototype without leaving the tool .

UID8 - UX Drawing App
A new application for creating sketches of interfaces on the tablet, UID8, has been released. In contrast to the more primitive fellows, he orients himself on the usual process of drawing on paper and supports transitions between screens.

Modern Publishing Tools

• The third version of Designmodo's Slides framework has been released .
• Another domestic tool "layout", which is used by Kommersant and others .

Modern editorial CMS

• Meduza spoke about the second version of its editorial CMS Monitor .

Abstract

• An overview of the tool from Matteo Gratton .

Avocode

• Avocode Report for 2016 - features of layouts that passed through the product. Many interesting nuances of techniques .

Zeplin

• Zeplin now shows the version history of the screen .

Compromise between designer and developer
A good article on the transfer of layouts in the development of Alex Barashkov and Vlad Kamelsky.

User research and testing, analytics

Usability and e-banking functionality, 2017
UsabilityLab launched a comparative usability-study of banks' mobile applications, where, in addition to usability testing of frequency problems, the company threatened to assess the usability of all the functionality by reworking the Donald Norman 7-stage model. Also, we will address the issue of "accessibility". The study will be ready in April.



Cassette
The Cassette app simplifies user interviews. In addition to audio recordings, it offers rough transcriptions and categorization of insights.



Classification of user research methods

• Susan Farrell from Nielsen / Norman Group proposes a classification of user research methods in relation to the key stages of the project .

Head and shoulders - neurophysiological research in game development
Ksenia Sternina and her colleagues from HSE have been involved in a project for the last six months using human neurophysiological indicators.



The Beginners' Guide to Contextual Interviewing
David Travis of UserFocus on how to conduct interviews in a real life context or user experience.

A / B testing

• A / B testing report during the Donald Trump presidential campaign .

How Accurate Are UX Metrics From Online Panels?
Jeff Sauro compares the results of user surveys from different panels on several popular metrics, including NPS, SUPR-Q.

Visual programming and browser design

Framer

• Framer has learned to give animation parameters for Android and iOS .

From concept to dribbble to code

• Front-end developer Sasha Tran decided to draw icons directly in CSS . She got a whole series on Codepen .

New scripts

• A set of scripts to animate the search .

CSS shapes

• Not exactly about CSS shapes, but about how to make curly underlays in the header of the site .

Work with color on the web

• WebGradients site offers CSS options for trendy gradients .

Flexbox

• Another flexbox memo, described by Scott Domes in simple terms .

UX strategy and management

Goal setting for designers

• The presentation of Jake Causby and Jason Davey , which shows an excellent model of "parallel diamonds" (in addition to the double diamond from design thinking), consonant with the idea of ​​my presentation - design as an aid in strategy formation and product development.
• Basecamp's Ryan Singer suggests that designers change the language in which they describe interface problems . Instead of abstract “light / heavy”, “understandable”, etc. He offers clear and specific phrases.

Building a design culture

• Corinne Wayshak’s very good thoughts on how designers can involve different product team experts in effective interaction and raise the overall design culture .

Stakeholder mapping
Cassie Slack from Shopify offers a stakeholder map for a project that divides them according to two criteria - influence and interest. For each of the four categories, she has tips on productive interaction.



Design Criticism Organization

• Denise Spiessens tells how design criticism is organized in Shopify .

Cases

Redesign Cases

• Case Study Club, another site collection case redesign .
• How Stack Overflow reworked the main menu . Using design sprints for such a task is either too expensive, or they mean some kind of simplified version. But the process of rolling out with the study of analytics and usability testing results is described very nicely.

Story

Control panel
A luxurious collection of old dashboards on Flickr. 2300 photographs of rare devices, instruments and socio-technical systems.

Trends

2017 Design Trends Guide
It seems the most comprehensive overview of trends from Loredana Papp-Dinea, Mihai Baldean and Milo Themes at Behance. Although in many respects these are still the same bluffed “big fonts”, “background videos” and “animation”, everything seems to have been collected here in recent years.



Other forecasts for 2017:

• A good parody of the 2017 trends from Christian Beck .

The Circular Design Guide
IDEO decided that there were no new buzzwords in the profession for a long time and at the end of 2016 they launched the cyclic design guide. We take design thinking, sustainable development, flexible and lean-techniques and - voila! - A new method is ready. Urgently update professional profiles.



Continuing the theme:

• Methodology Heuban .

The UX of Voice - The Invisible Interface
Jason Amunwa from Digital Telepathy talks about the design features of voice interfaces. At CES 2017, there was a real boom in devices using Amazon Alexa, so many designers will be faced with designing for voice assistants this year.



Algorithmic design

• Maurice Conti's insanely cool performance on TEDx about algorithms in industrial design, architecture and solving complex problems .
• Pinterest decided to launch Shazam for Photos .
• The Grid has updated the site , now the product is open to all. It shows examples of pages created on the engine and they confirm the worst concerns of commentators on Designer News and Reddit - it turns out quite mediocre. For example: andersonpaak.audio and yellow.community .

Messengers and bots

• Visual crib for creating bots in Facebook Messenger by Alina Yurchenko from Stanfy .
• Shane Mac offers an alternative approach to navigation when communicating with the bot . RAN (Random Access Navigation) makes it possible not to lead the user in a not always natural and often stupid scenario, but to pick up his requests in the course of a flexible discussion.
• Jesús Martín describes his approach to the development of the bot response tree .

Car Interfaces

• A selection of automotive interface concepts on Dribbble .
• Denny Moritz, the author of the Porsche Mission E interface concept, puts his work on Behance . His site .

Smart watches and bracelets

• Concept application for watches that can identify emotions during a conversation .
• Wearable things are getting worse: Fitbit cuts 110 employees ; Jawbone leaves the mainstream market for B2B (medicine) ; Apple’s revenue from the “Other” category, which includes Apple Watch, fell last year .
• Gameband smartwatch .

For general and professional development

Designers.how
An interesting online course that focuses on teaching popular tools to product designers. Now there are lessons on Swift, Sketch, Origami, AfterEffects, Adobe XD, Flinto, Cinema 4D.



Books That Have Influenced Our UX Careers, part 1 - Design
UXmatters plans to launch a section with recommended books. In anticipation of this, they interviewed a dozen columnists on their favorite books on interface design. In the remaining issues will be books on user research and usability testing.

How to get experience without experience - A new designer's paradox
Richard Yang gives advice to novice designers on how to gain experience and a portfolio without real problems. He advises to make an uninvited redesign and describes in detail how to select the appropriate project and submit it.



The film "Graphic Means"

• Interview with the director of the film Briar Levit .

People and companies in the industry

Shopping design studios by large companies

• Accenture buys for $ 100 million a large stake in one of Germany’s largest agents, SinnerSchrader .

Transitions and appointments of famous designers

• Nicholas Jitkoff, one of the ideologists of material design at Google, moved to Dropbox for the position of head of design .

Stanford d.school
Stfordford d.school's blog on Medium. One recent article from Carissa Carter, the director of training, talks about how students are brought up with flexibility in relation to the process . The article is a great analogy with recipes.



Dropbox design

• Tips Anisha Jain on how to work with complex interfaces and properly prioritize . Clear prioritization of users and their needs, focus on key functionality for new features and a systematic approach across the entire product.
• How the user research team at Dropbox works .

Design at Creative Market

• The head of the design team Gerren Lamson talks about the format of specifications for describing the logic of the interface screens . Pattern . His colleague Noah Strokes describes a real sample document based on a template .
• Gerren Lamson describe a memo for new designers in the company . This is a step-by-step guide for design managers and employees themselves on how to best integrate into the work process and culture.

Flipboard design
Flipboard design team blog on Medium. In February, they launched a new version of the application and talk about working on it .



Other design team blogs:

• R / GA design team blog .

How IBM Is Embracing the Future Through Design
Another good story about how IBM rethought the design in the company.

Conference proceedings

UX STRAT 2016
In 2016, the UXSTRAT 2016 conference held two parts: June 4-5 in Amsterdam and September 14-16 in Providence, USA . It is dedicated to the design strategy and gathers a powerful composition of thematic speakers. Presentations published on SlideShare . I will highlight the most interesting of them.

• Master class by James Kalbach "Mapping Experiences" .
• Ben Judy on Intuit's UX-strategy on three levels - product, company and its mission . A very interesting example of the organization of the workflow around the Double Diamond on slides 14 and 15 - they combined this model with a kanban board and a project plan.
• An interesting ROI design model from Jon Ashley and Matt Wakeman from EPAM . They consider it in three sections - perception, finance and operations. For each of them are given the metrics of how designers can help the company.
• Shikha Desai from the Microsoft Office team talks about design jams that allow the product to find new directions for growth . This is a combination of several practices of teamwork (hackathons, experiments, interns, concepts), which ultimately allow you to bring new ideas into the product plan.
• Michel Jansen's cool case on how the services of the Dutch financial company Aegon improved . A good example of using the Kano model in practice.
• ING's Kees Moens tells how the design has changed in the company . Good practical implementation of the UX maturity model.
• HaPro from GoPro shows how user research and experimentation helped in working on a simple video editor .
• Michael Thompson shows a useful example of a customer journey map with key metrics .
• Jeffrey Onken proposes to consider the stages of the UX maturity model as an ordinary customer journey map . In this form, it is much easier to detect and correct problems that prevent the creation of a good design.
• Beverly May talks about the mechanics of the UX Awards . An interesting set of criteria that can be useful, for example, in the analysis of test items.

Fresh links can also be tracked in the Facebook group of the same name or received once a month by mail . Thanks to everyone who also publishes links in it, especially Gennady Dragun, Pavel Skripkin, Dmitry Podluzhny, Anton Artyomov, Denis Efremov, Alexey Kopylov, Taras Brizitsky, Evgeny Sokolov and Anton Oleinik. More and more materials in reviews appear thanks to them.