Product design digest, august 2018
The digest collects fresh articles on interface design, as well as tools, patterns, cases and historical stories since 2009. I carefully filter a large stream of subscriptions so that you can upgrade your professional skills and better solve work tasks. Previous issues: April 2010-July 2018 .
Nathan Gitter was impressed with the “Designing Fluid Interfaces” performance at WWDC 2018 and made a series of experimental interface solutions that show a similar animation during gesture control.
Therese Fessenden from the Nielsen / Norman Group talks about conspicuity theory and the interpretation of interface elements. Their combination affects the perception of the product as a whole.
Saadia Minhas examines in detail the situations in which you need to use the checkbox and toggle switch - they solve similar problems, but are not interchangeable.
Another library of patterns of mobile applications.
A smart concept for the development of notifications and multitasking in iOS by Kévin Eugène. The notification can interact with the currently open application, which gives many interesting features.
Memo Stéphanie Walter on the design of mobile forms. Since the days of the classic Luke Wroblewski book, little has changed, but its new edition is clearly not enough, so the article is useful. Part 2 talks about handling input fields on mobile .
Smart visual reference book on how to visualize data.
Amazon uses a fairly hard dark pattern - in contrast to the imputed standard approach, we throw a positive assessment into the app store, a negative feedback, they simply don’t let the bad reviews leave (they say it was too long).
Kim Flaherty from Nielsen / Norman Group has identified several areas in which Amazon works poorly and makes it possible for other online stores to stand out.
Edward Scott writes about the importance of an explicit way to return goods to an offline store.
SteelKiwi Inc. team compares the implementation of typical interface tasks in Android and iOS. A good reminder for those who are just beginning to learn the specifics of mobile platforms.
Kyle Peatt tells the story of the creation of the Shopify Polaris design system. Very useful analysis of the features and problems of implementation and promotion of the platform. For example, many companies see the design system as a way to raise the basic level of product design, but typical solutions may limit designers; therefore, they constantly make "concept cars" - experiments with interface patterns in the spirit of a single design that move the Polaris forward.
Matt Bond recently moved to Asana, but was at the forefront of the Atlassian design system. He talks about the key findings that he made for himself while working on it.
Registration for the Clarity Special Conference in New York (December 10-12) has opened. The first was the fire, the second was completely in the milk ( was there and broken off ). There is no new program yet, but you have to be careful not to fall for those who have little to do with the topic of presentation.
Android P is out of beta and is already available on some devices. EK Chung, Android Design Manager, talks about the principles embodied in the new version .
Review of video recordings of design appearances from Apple WWDC 2018 .
Daniel Stefanovic collects the principles of psychology for designers in a visual form with references to the theory. While they are not very many, but the list should be updated.
New research on the dangers of blue light in modern interfaces is even sadder - they say they lead to irreversible loss of time.
New Riders publishes Carrie Hane’s “Designing Connected Content: Voices That Matter” book in December 2017. It is dedicated to working on the content of complex sites and information products, the interface and content are closely related to each other and it is often not clear what needs to be designed first, and then what. Webinar author .
Gradually talk about the key features of Framer X: layouts and drawing . Working with layouts is extremely interesting and promises to greatly simplify the life of designers. Antoine Plu shares his impressions about the beta version of Framer X (he recorded the screencast of the work).
Beta versions are gradually arriving to all those who are waiting. And there was an official description of how the components work . The ability to import any components into React is mentioned.
Added advanced ways to interact with the prototype .
A small course from Designlab .
August update : improved performance with the issuance of specifications to developers.
July update : integration with third-party tools.
The tool helps build and test interactive interface prototypes. Import from Sketch and quite extensive analytics on script execution.
Koos Looijesteijn compared Sketch, Figma, Adobe XD, UXPin and InVision Studio in a variety of settings.
A pack of chic templates for sketches of augmented and virtual reality interfaces from Vladimir Kurbatov.
Service for working with the base of insights. It helps to aggregate user research data in order to find useful ideas for product development among them. For several years he was in beta and now the first version is being prepared .
Mail.Ru creative director Dmitry Osadchuk and head of the UX-lab Ksenia Sternina told Composition about a series of UX-tests for Beepcar video clips. This helped to understand how well they would work for different groups of the audience and make a checklist for the future.
Jeff Sauro lists the types of rating scales for user surveys. Excellent reference.
Victor Kuptsov of Usethics shares his experience in testing interfaces with children and teenagers who are accompanied by parents. In these pairs there is an interesting dynamics depending on whether the mother / father and daughter / son came.
Facundo Corradini shows how to set the text color in a control, depending on the background, using CSS . This simplifies the description of components in design systems.
The script shows an example of morphing shapes on SVG .
The script makes animation in the spirit of neon signs with the blinking effect .
The generator of color variations for a particular color is a great tool for working on guidelines.
Mathieu Triay made another review of variable fonts . In general, the standard, but there is a useful figure about saving file size on the example of a single font.
Bennett Feely shows what can be done with blending modes in CSS . It looks like some of the best Photoshop filters, but this is an important step in finding the boundaries of the possible.
Online tool helps to try on SVG-filters .
Plugin for Chrome and Firefox allows you to quickly get the final code of the selected element on the page, without searching for dependencies yourself.
Aaron Powers and Scott Mackie from Athena Health are arguing with recent provocative Alan Cooper and Jared Spool articles on ROI design. This is a healthy question for any food team - in which activities it is best to invest resources. The authors show several examples from their practice that simplified the selection of commands.
Memo Jeff Sauro on key interface metrics.
Angela Huenerfauth and David Teller offer an extremely interesting method for assessing the maturity of product design. They have agreed with product managers to track this indicator in the course of development work and take a joint decision on the sufficient level of usability for its release. It looks complicated, but this is probably because the approach is still completely unfamiliar.
Athena Health's Dani Nordin describes a company's approach to solving design debt. An intelligent system method, like everything the team writes about.
Dave Malouf reflects on the applicability of the Spotify organizational model and any other methodologies and work approaches. It is important to understand that they presuppose a certain culture and agreements that may work in one and fail in another company.
Andre Le Masurier from London Google talks about how the brand's design team works .
Rosenfeld Media has released Kevin Hoffman's Meeting Design: For Managers, Makers, and Everyone book . UXmatters publishes chapter 5 of it about facilitation styles.
A good story about the work on the design of the Screenlife application for recording video of the user's work on a mobile phone from Elvis Obanya.
Antin Harasymiv from Google talks about how the animation works and in the body the technical work of the Google Maps interface. The text is long, but useful for understanding the general principles.
Kathryn Whitenton and Sarah Gibbons from the Nielsen / Norman Group show how the company used its best practices in redesigning the home page of its own site.
Former Apple engineer Ken Kocienda publishes the Creative Selection book about the company's design process in the era of Steve Jobs. 9 to 5 Mac publishes an excerpt from it about working on the onscreen keyboard of the first iPhone.
Stephen Hackett has collected a collection of 1500 screenshots of the MacOS interface from the generations that used the aqua interface.
-1.8%
drop in sales of smartphones in the world
16.8%
increase in sales of smart speakers in the world
898K
sales of smartphones in the secondary market in Russia (Avito)
Jeff Sauro updated his annual review of smartphone usage statistics.
The 20th Century Fox film company has learned to determine from a trailer which segment of the audience will like the movie more.
Uizard's experimental solution turns interface sketches on paper into fairly neat Sketch layouts.
Alibaba learned how to automatically generate product names. It's time for jokes, "but what, before no?".
Page Laubheimer and Raluca Budiu continue the story of a large user study of Alexa, Google Assistant and Siri voice assistants. In the second article, they write about people's attitudes towards such devices and expectations about the quality of responses and the format of the dialogues.
LoupVentures compared the quality of Alexa, Cortana, Google Assistant and Siri responses to 800 queries. If there were no problems with understanding the phrase itself, then with the issuance of a suitable answer, everything is much worse.
Online chat chat bots and skills for voice assistants Google Assistant and Yandex Alice.
Over the past year and a half there have been many devices like "voice assistant with a screen." In fact, any tablet or smartphone with a docking station can solve this problem. It seems that Google is preparing this mode for Android phones .
Nuance is working on a voice assistant for cars that will work without a start word — the name of the assistant .
A small story about the team at Google, which deals with the character of the voice assistant - jokes, non-standard answers, handling of difficult situations.
Just AI shares the conclusions made on the basis of the experience of participation in the hackathon .
Redmadrobot also talks about his experience . Part 2 .
Heads and Hands talks about his concept .
Fabricio Teixeira and Caio Braga are writing about the problem of overly superficial design articles that dominate deeper and more useful ones. One of the reasons is understandable - the need for self-promotion. They conducted an interesting analysis of articles in the most popular ezines and communities over the past year and identified the types of publications. Naturally, practical advice about basic design skills dominates, i.e. more tactical things.
And Co study on trends and the current state of distant work for designers.
Tiantian Xu participated in the personal challenge “100 layouts in 100 days” and pumped animation skills.
Userfocus's David Travis offers a portfolio submission method for user researchers. It uses the abbreviation POWER (Project, Objective, Work, End result, Reflection) to define the structure. This approach is suitable for other UX-specialists, the result of which does not fit into a series of pictures.
Several interns from well-known companies wrote about their first year of work and what they had learned during this time:
Buzzfeed
IBM
Deliveroo
Facebook
Google
Jeoff Wilks from IBM describes the key skills of a leading designer in the company. Useful checklist for any strong specialist.
Muriel Garreta-Domingo and Alberto González Mosquera studied user research vacancies and described several approaches to understanding it by different companies.
August 8, one of the oldest UX-companies Nielsen / Norman Group is 20 years old. Jacob Nielsen collected the most popular articles for each year of the company - they do a huge service to the professional community, sharing with us such a mass of usefulness. And often these are quite deep and relevant materials that still set the trends after so many years.
Since spring vc.ru has been carrying out an excellent series of stories of Russian design studios and creative agencies. A dozen stories have already been published with a good overview of the business and results.
Skyscanner design team blog. In one of the latest articles, David Hamill shows how designers reinforce the description of interface problems with comics, so that the product team fixes them .
Blog design team Asana. It's empty yet, but the guys are vigorous and should swing.
Blog design team game company Space Ape Games.
File sharing service WeTransfer bought FiftyThree , the creator of the hit Paper application for drawing on iPa. They say they want to become one of the main products for designers and other workers in the creative industry.
Report on the course, which was held August 13-17 in London. Speech Summaries Stink Studios, Net-A-Porter, Native Design, Intuit, Modern Human, UX Study, Badoo, Fjord, Space Ape Games, Spov and R / GA.
Patterns and best practices
Building Fluid Interfaces
Nathan Gitter was impressed with the “Designing Fluid Interfaces” performance at WWDC 2018 and made a series of experimental interface solutions that show a similar animation during gesture control.
Prominence-Interpretation Theory
Therese Fessenden from the Nielsen / Norman Group talks about conspicuity theory and the interpretation of interface elements. Their combination affects the perception of the product as a whole.
Checkbox vs Toggle Switch
Saadia Minhas examines in detail the situations in which you need to use the checkbox and toggle switch - they solve similar problems, but are not interchangeable.
UI Sources - Mobile Design Patterns and Interactions
Another library of patterns of mobile applications.
Redesigning Siri and adding multitasking features to iOS
A smart concept for the development of notifications and multitasking in iOS by Kévin Eugène. The notification can interact with the currently open application, which gives many interesting features.
UX And HTML5 - Let's Help Users Complete Your Mobile Form, part 1
Memo Stéphanie Walter on the design of mobile forms. Since the days of the classic Luke Wroblewski book, little has changed, but its new edition is clearly not enough, so the article is useful. Part 2 talks about handling input fields on mobile .
From data to Viz - Find the graphic you need
Smart visual reference book on how to visualize data.
Amazon Dark Patterns - Censuring Unhappy Customers
Amazon uses a fairly hard dark pattern - in contrast to the imputed standard approach, we throw a positive assessment into the app store, a negative feedback, they simply don’t let the bad reviews leave (they say it was too long).
6 Ways Ecommerce Sites Can Compete With Amazon
Kim Flaherty from Nielsen / Norman Group has identified several areas in which Amazon works poorly and makes it possible for other online stores to stand out.
Baymard Institute Studies
Edward Scott writes about the importance of an explicit way to return goods to an offline store.
Design systems and guidelines
Differences between Designing Native iOS Apps and Native Android Apps
SteelKiwi Inc. team compares the implementation of typical interface tasks in Android and iOS. A good reminder for those who are just beginning to learn the specifics of mobile platforms.
The system always kicks back
Kyle Peatt tells the story of the creation of the Shopify Polaris design system. Very useful analysis of the features and problems of implementation and promotion of the platform. For example, many companies see the design system as a way to raise the basic level of product design, but typical solutions may limit designers; therefore, they constantly make "concept cars" - experiments with interface patterns in the spirit of a single design that move the Polaris forward.
The key lessons I learned creating a popular Design System
Matt Bond recently moved to Asana, but was at the forefront of the Atlassian design system. He talks about the key findings that he made for himself while working on it.
Clarity Conference 2018
Registration for the Clarity Special Conference in New York (December 10-12) has opened. The first was the fire, the second was completely in the milk ( was there and broken off ). There is no new program yet, but you have to be careful not to fall for those who have little to do with the topic of presentation.
Android 9.0 Pie
Android P is out of beta and is already available on some devices. EK Chung, Android Design Manager, talks about the principles embodied in the new version .
iOS 12
Review of video recordings of design appearances from Apple WWDC 2018 .
Understanding the user
Digital psychology
Daniel Stefanovic collects the principles of psychology for designers in a visual form with references to the theory. While they are not very many, but the list should be updated.
Information architecture, conceptual design, content strategy
Study: Blue light from screens can steadily blind us
New research on the dangers of blue light in modern interfaces is even sadder - they say they lead to irreversible loss of time.
Carrie Hane - Designing Connected Content
New Riders publishes Carrie Hane’s “Designing Connected Content: Voices That Matter” book in December 2017. It is dedicated to working on the content of complex sites and information products, the interface and content are closely related to each other and it is often not clear what needs to be designed first, and then what. Webinar author .
Design and design of interface screens
Framer x
Gradually talk about the key features of Framer X: layouts and drawing . Working with layouts is extremely interesting and promises to greatly simplify the life of designers. Antoine Plu shares his impressions about the beta version of Framer X (he recorded the screencast of the work).
Beta versions are gradually arriving to all those who are waiting. And there was an official description of how the components work . The ability to import any components into React is mentioned.
Figma
Added advanced ways to interact with the prototype .
A small course from Designlab .
Adobe XD
August update : improved performance with the issuance of specifications to developers.
July update : integration with third-party tools.
Preely - Prototyping and user testing tool
The tool helps build and test interactive interface prototypes. Import from Sketch and quite extensive analytics on script execution.
Sketch, Figma, Adobe XD, UXPin or InVision Studio: which one?
Koos Looijesteijn compared Sketch, Figma, Adobe XD, UXPin and InVision Studio in a variety of settings.
Templates for AR / VR Sketches
A pack of chic templates for sketches of augmented and virtual reality interfaces from Vladimir Kurbatov.
User research and testing, analytics
Optimal Workshop Reframer
Service for working with the base of insights. It helps to aggregate user research data in order to find useful ideas for product development among them. For several years he was in beta and now the first version is being prepared .
Checklist for creating effective video ads - neuro research on BeepCar videos
Mail.Ru creative director Dmitry Osadchuk and head of the UX-lab Ksenia Sternina told Composition about a series of UX-tests for Beepcar video clips. This helped to understand how well they would work for different groups of the audience and make a checklist for the future.
15 Common Rating Scales Explained
Jeff Sauro lists the types of rating scales for user surveys. Excellent reference.
Respondents, as well as their parents (at UX)
Victor Kuptsov of Usethics shares his experience in testing interfaces with children and teenagers who are accompanied by parents. In these pairs there is an interesting dynamics depending on whether the mother / father and daughter / son came.
Visual programming and browser design
New scripts
Facundo Corradini shows how to set the text color in a control, depending on the background, using CSS . This simplifies the description of components in design systems.
The script shows an example of morphing shapes on SVG .
The script makes animation in the spirit of neon signs with the blinking effect .
Work with color
The generator of color variations for a particular color is a great tool for working on guidelines.
Web typography
Mathieu Triay made another review of variable fonts . In general, the standard, but there is a useful figure about saving file size on the example of a single font.
Layer Modes
Bennett Feely shows what can be done with blending modes in CSS . It looks like some of the best Photoshop filters, but this is an important step in finding the boundaries of the possible.
Work with SVG
Online tool helps to try on SVG-filters .
CSS Scan - Instantly check or copy
Plugin for Chrome and Firefox allows you to quickly get the final code of the selected element on the page, without searching for dependencies yourself.
Metrics and ROI
Getting questions about the ROI of UX? 3 ways to refocus the conversation to opportunities
Aaron Powers and Scott Mackie from Athena Health are arguing with recent provocative Alan Cooper and Jared Spool articles on ROI design. This is a healthy question for any food team - in which activities it is best to invest resources. The authors show several examples from their practice that simplified the selection of commands.
15 Metrics for UX Benchmarking
Memo Jeff Sauro on key interface metrics.
UX strategy and management
Creating Usability Maturity Models for Large-Scale Projects
Angela Huenerfauth and David Teller offer an extremely interesting method for assessing the maturity of product design. They have agreed with product managers to track this indicator in the course of development work and take a joint decision on the sufficient level of usability for its release. It looks complicated, but this is probably because the approach is still completely unfamiliar.
Creating a sustainable strategy for tackling product-wide UX debt
Athena Health's Dani Nordin describes a company's approach to solving design debt. An intelligent system method, like everything the team writes about.
The Allure of a Shiny (misunderstood) Silver Bullet
Dave Malouf reflects on the applicability of the Spotify organizational model and any other methodologies and work approaches. It is important to understand that they presuppose a certain culture and agreements that may work in one and fail in another company.
How are well-known design teams
Andre Le Masurier from London Google talks about how the brand's design team works .
Team interaction
Kevin Hoffman - Meeting Design: For Managers, Makers, and Everyone
Rosenfeld Media has released Kevin Hoffman's Meeting Design: For Managers, Makers, and Everyone book . UXmatters publishes chapter 5 of it about facilitation styles.
Cases
Screenlife App - A UI / UX case study
A good story about the work on the design of the Screenlife application for recording video of the user's work on a mobile phone from Elvis Obanya.
Prototyping a Smoother Map
Antin Harasymiv from Google talks about how the animation works and in the body the technical work of the Google Maps interface. The text is long, but useful for understanding the general principles.
Case Study: Iterative Design and Prototype Testing of the NN / g Homepage
Kathryn Whitenton and Sarah Gibbons from the Nielsen / Norman Group show how the company used its best practices in redesigning the home page of its own site.
Story
IPhone Explorer keyboard design process
Former Apple engineer Ken Kocienda publishes the Creative Selection book about the company's design process in the era of Steve Jobs. 9 to 5 Mac publishes an excerpt from it about working on the onscreen keyboard of the first iPhone.
Aqua Screenshot Library
Stephen Hackett has collected a collection of 1500 screenshots of the MacOS interface from the generations that used the aqua interface.
Trends
Market statistics (II quarter and first half of 2018)
-1.8%
drop in sales of smartphones in the world
16.8%
increase in sales of smart speakers in the world
898K
sales of smartphones in the secondary market in Russia (Avito)
15 Mobile UX Facts & Insights (2018)
Jeff Sauro updated his annual review of smartphone usage statistics.
Algorithmic design
Fox AI movie trailer
The 20th Century Fox film company has learned to determine from a trailer which segment of the audience will like the movie more.
Wizard: Convert hand-drawn wireframes to Sketch
Uizard's experimental solution turns interface sketches on paper into fairly neat Sketch layouts.
Alibaba Says Its AI Copywriting Tool Passed the Turing Test
Alibaba learned how to automatically generate product names. It's time for jokes, "but what, before no?".
Voice Interfaces
Intelligent Assistants - Users' Attitudes Toward Alexa, Google Assistant, and Siri
Page Laubheimer and Raluca Budiu continue the story of a large user study of Alexa, Google Assistant and Siri voice assistants. In the second article, they write about people's attitudes towards such devices and expectations about the quality of responses and the format of the dialogues.
Google Assistant is the smartest digital assistant around study shows
LoupVentures compared the quality of Alexa, Cortana, Google Assistant and Siri responses to 800 queries. If there were no problems with understanding the phrase itself, then with the issuance of a suitable answer, everything is much worse.
Aimylogic - Chat Bots Designer
Online chat chat bots and skills for voice assistants Google Assistant and Yandex Alice.
Other Voice Interface News
Over the past year and a half there have been many devices like "voice assistant with a screen." In fact, any tablet or smartphone with a docking station can solve this problem. It seems that Google is preparing this mode for Android phones .
Nuance is working on a voice assistant for cars that will work without a start word — the name of the assistant .
A small story about the team at Google, which deals with the character of the voice assistant - jokes, non-standard answers, handling of difficult situations.
Materials from the hackathon on Google Assistant
Just AI shares the conclusions made on the basis of the experience of participation in the hackathon .
Redmadrobot also talks about his experience . Part 2 .
Heads and Hands talks about his concept .
For general and professional development
Are we designers shamelessly good at self promotion?
Fabricio Teixeira and Caio Braga are writing about the problem of overly superficial design articles that dominate deeper and more useful ones. One of the reasons is understandable - the need for self-promotion. They conducted an interesting analysis of articles in the most popular ezines and communities over the past year and identified the types of publications. Naturally, practical advice about basic design skills dominates, i.e. more tactical things.
Remote Work & Digital Nomads Study 2018 - The Anywhere Workers
And Co study on trends and the current state of distant work for designers.
100 Days of Motion Design
Tiantian Xu participated in the personal challenge “100 layouts in 100 days” and pumped animation skills.
How to create a POWERful case study for your UX portfolio
Userfocus's David Travis offers a portfolio submission method for user researchers. It uses the abbreviation POWER (Project, Objective, Work, End result, Reflection) to define the structure. This approach is suitable for other UX-specialists, the result of which does not fit into a series of pictures.
Work with trainees
Several interns from well-known companies wrote about their first year of work and what they had learned during this time:
Buzzfeed
IBM
Deliveroo
Becoming a veteran UX Designer
Jeoff Wilks from IBM describes the key skills of a leading designer in the company. Useful checklist for any strong specialist.
The Evolution of UX Research - A Job Posting Analysis
Muriel Garreta-Domingo and Alberto González Mosquera studied user research vacancies and described several approaches to understanding it by different companies.
People and companies in the industry
20 years of Nielsen / Norman Group
August 8, one of the oldest UX-companies Nielsen / Norman Group is 20 years old. Jacob Nielsen collected the most popular articles for each year of the company - they do a huge service to the professional community, sharing with us such a mass of usefulness. And often these are quite deep and relevant materials that still set the trends after so many years.
Agency stories
Since spring vc.ru has been carrying out an excellent series of stories of Russian design studios and creative agencies. A dozen stories have already been published with a good overview of the business and results.
Skyscanner design
Skyscanner design team blog. In one of the latest articles, David Hamill shows how designers reinforce the description of interface problems with comics, so that the product team fixes them .
Asana design
Blog design team Asana. It's empty yet, but the guys are vigorous and should swing.
The Space Ape Games Experience
Blog design team game company Space Ape Games.
Shopping design studios large companies
File sharing service WeTransfer bought FiftyThree , the creator of the hit Paper application for drawing on iPa. They say they want to become one of the main products for designers and other workers in the creative industry.
Conference proceedings
Future London Academy 2018 course on UX and product design
Report on the course, which was held August 13-17 in London. Speech Summaries Stink Studios, Net-A-Porter, Native Design, Intuit, Modern Human, UX Study, Badoo, Fjord, Space Ape Games, Spov and R / GA.
Subscribe to a digest on Facebook , VKontakte , Telegram or by mail - there fresh links appear every week. Thanks to everyone who shares the links in the group, especially Gennady Dragun, Pavel Skripkin, Dmitry Podluzhny, Anton Artyomov, Denis Efremov, Alexey Kopylov, Taras Brizitsky, Yevgeny Sokolov and Anton Oleynik.