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 .

    Product design digest, august 2018

    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.


    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.


    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.


    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.


    Market statistics (II quarter and first half of 2018)

    drop in sales of smartphones in the world

    increase in sales of smart speakers in the world

    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:






    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 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.

    Also popular now: