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

Patterns and best practices

Comparison Tables for Products, Services, and Features
Kate Meyer of the Nielsen / Norman Group describes the perfect interface for comparing products, tariffs and other information. Translation .


')
I want better Release Notes
Rob Gill's helpful checklist for writing useful messages about updating an application. What to include there and how to make out the text itself.

3 Strategies for Handling Accidental 'Taps' on Touch Devices
Baymard Institute write about the problem of random clicks in the mobile web and offer three ways to solve it - to score, ask for confirmation and give an opportunity to the problem. The third looks the most convenient from the point of view of the interface, but often requires serious technological investments. At the end of the article is a good reminder of how to choose an approach for a specific task.



Other Baymard articles:

• Analysis of the Kohl online store interface that complies with most of the best practices.

10 Steps for better Onboarding Experience
A simple but rather capacious reminder of Grzegorz Oksiuta on the principles of meeting a new user. It describes both onboarding product tasks and specific patterns — most articles on the topic are limited to the latter.

The magic of microcopy
Dropbox copywriter Josh Saito gives tips on writing catchy texts in interfaces - how to make them both useful and emotional.

Screenshot? Ugh, you're doing it wrong!
Jason Zimdars from Basecamp offers an interesting way to handle the creation of screenshots on mobile. The user is more likely to want to share it, so some applications offer a more convenient way to do this.

Confirmshaming
Collection site dedicated to the dark practices that seek to “shame” the user for refusing to use. Review by Brandon Dorn .

Mailing letters

• Interview with Paul Airy, in which he gives advice on working with fonts in mailing letters .

No Share This One Weird Case
Josh Clark advises to abandon the "share" buttons in the mobile versions of the site - according to him, users mostly use the built-in platform functions. But for those who came to the link from the social network, he leaves them and puts the button where the person came from, the first and largest.

Design systems and guidelines

Yandex Depot
At the end of last year, Anton Shein spoke about the environment for creating Yandex Depot component frameworks (you need to create the components yourself). Last week he began to publish screencasts showing work with him: overview , features , template engine ( Beast ). So far there is not very much information, but the guys gradually fill up documentation and publish new videos.







Other design systems news:

• A small but sensible Carbon design system from the IBM Bluemix team. A couple of words from the authors .
• Nathan Curtis offers his description of the tasks and responsibilities of the role of the head of the design system .
• Nathan Curtis described 8 principles of a good design system .
• Tom Coleman describes a systematic approach to testing the components of a design system . This is a bunch of live guideline and comparison with screenshots.

React Sketch.app
Jon Gold has moved to Airbnb and is working on tools for designers. One of his experiments is a plugin for Sketch, which allows you to associate layouts with components on React. Flexbox-based adaptability, the use of real data is an extremely interesting approach, which Protein had promised before, but it never started.

Practical Design Discovery
An excerpt from Chapter 3 of the book of the same name by Dan Brown, devoted to the description of the principles of design. He describes well the benefits of them and gives sensible advice on creating your own.



Android

• Android 7 templates for Photoshop and Sketch from Great Simple Studio .

Understanding the user

Design for Fingers, Touch, and People, Part 1
Steven Hoober decided to update his research on how users hold smartphones. He started from afar - about the technology of touch screens themselves, how they affect the accuracy of recognition of pressing and gestures and how the human hand works.



Scanning Patterns for the Current Task
Kara Pernice from Nielsen / Norman Group has collected a smart analysis of how usability testing using eye tracking depends on the problem statement. The article has very illustrative illustrations of how the movement of gaze changes for different scenarios.



The Theory of User Delight - The Foundation for Delightful Experiences
Good thoughts Therese Fessenden from the Nielsen / Norman Group on how to better invest in creating a delight. She distinguishes between superficial (pineworks in the interface) and deep (achieved by successfully solving user problems) and says that it is better to focus on the second. Ironically, Mailchimp, who talked a lot about emotional design and delight, did the first to the detriment of the second.

On Loser Experience Design
Matt LeMay says that most of the interfaces push the user to success, getting to the top of the rating and other positive aspects of Achievera’s life, but forget that many do not achieve these results and feel like losers. It is important to consider these aspects.



Innovation: it's about more than bean bags
David Travis from UserFocus writes about the limitations of iterative design. It is good for optimizing an existing product, but it does not help to make breakthroughs leading to new product ideas and innovations.

Information architecture, conceptual design, content strategy

A Visual Vocabulary for Concept Models
Christina Wodtke opens a series of articles on creating conceptual models.

Design and design of interface screens

Kite compositor
A fresh tool for interface animation and interactive prototypes. Very promising opportunities to work on interfaces iOS, Android, Apple Watch, MacOS and the web. There is a JavaScript code editing mode, inserting ready-made pieces of code into the product. Works on Mac ( video ).



Do you know where your icons are?
Dropbox's Bobby Grace tells how the design team set up the system work with icons. From a single layout in Sketch, they fall into the development repository.



Website developer Wix acquires art community DeviantArt for $ 36M
Wix website builder buys the DeviantArt design community. It was the last independent player (previously Adobe bought Behance, and Tiny - Dribbble). DeviantArt users will be able to build cases on the basis of the designer, and Wix users will be able to use community graphics when creating websites. The news was slightly delayed, but still important.

Better Web Typography for a Better Web
Online web typing course by Matej Latin. Works in the format of lessons that come in the mail.



Sketch vs Figma - The Showdown
Christian Krammer compares in detail the capabilities and interface of Sketch and Figma in several dozens of parameters.

Sketch

• In version 43 there will be a new file format with which creators of plug-ins and add-ons will find it easier to work. This will be a ZIP archive with images and JSON, so that the layout can be changed even from a text editor.
• The Egmont plugin to create squircle-shapes that are used throughout iOS, watchOS, and start moving to macOS.
• Sketchpacks Plugin Manager is an alternative to the Sketch Toolbox for finding, installing plugins. There are categories "new" and "popular"; it checks and updates installed ones.
• Picnic plugin tries to implement collaboration with the layout a la Figma. Video work .
• Jon Moore shows you how to make complex adaptive interface layouts using the AutoLayout plugin .

Tumult hype 3.6
Version 3.6 of the Hype Interface Animation Tool has been released. Improved export of animation (including the ability to write scripts for this), isolated mode for working with characters and many other minor improvements. Video review of the changes .



Subform

• Ryan Lucas describes the vision of how to work with grids in a modern tool for designers . Unlike most other tools on the market, which are built around the old model of work for printed materials with a static sheet, Subform wants to work in a modern way. In the first part, he described the history of the appearance of grids .

Omnigraffle

• Omni Group has announced a major OmniGraffle update for iOS . The interface has been noticeably reworked and a decent set of templates has been added for interface design.

Gridprint
A set of grids for paper prototyping of interfaces. In addition to standard devices, there are smart watches and isometric templates for prototyping gaming applications.

Abstract

• Interview with Josh Brewer , one of the creators of the designer collaboration tool.

Zeplin

• Zeplin update now optimizes SVG images and improves work with symbols (including those with variable parameters).

Flinto

• Elina Bereza and Semyon Boronnikov describe step-by-step instructions on how to create a pull-to-refresh animation in Flinto and transfer it to Android code.

Lottie

• Airbnb launched a site-collection of animation examples created with Lottie .

User research and testing, analytics

Aytreking in UX research
Natalia Sprogis wrote a great overview article about eytreking in UX-research: why you need it, what are the pros and cons.



Filling Up Your Tank
Victor Yocco examines in detail the approaches to determining the optimal set of respondents for qualitative research. It offers a formula for calculating the number of participants in a user study.



The Two Sides of Research
Shopify's Dylan Blanchard writes about the paradox of the role of a user explorer. On the one hand, he needs to be closely involved in the work of the food team, so that the conclusions from the research do not gather dust on the shelf, but take root into real life. On the other hand, too much attachment to the team does not allow looking at it from the outside to find high-level problems.

Conducting Qualitative, Comparative Usability Testing
Jim Ross gives advice on conducting high-quality comparative testing of competing products.

Using Social Media For User Research
Dave Ellender shares the experience of conducting a survey of user opinions and feedback on the product in social networks. How to set up tools and keywords for analysis, how to work with the results.

8 Things to Consider When Using Online Panels
A few more tips Jeff Sauro on working with panel research.

Visual programming and browser design

Animista
The coolest online tool Animista allows you to experiment with any ideas of CSS-animation and the output to get the finished piece of code.



Keyshape
New tool for interface animation. It helps to prepare it for use in the web - you can get SVG-code.



React Studio
The new tool allows you to prototype adaptive web services that are built on the basis of the React framework. It looks hard - this is work with knot points in the Origami spirit. But the idea is interesting and you can import layers from Sketch . The authors maintain a blog in which they published a detailed guide to creating a simple interface .



Inclusive Components
Heydon Pickering has launched a website that talks about making basic interface elements accessible. In the first part, he parses the tumblers .

Framer

• Now you can expand the work with fonts - loading custom and their animation.

New scripts

• Ryan Spilhaus has assembled animated characters from X-Men on CSS .
• AmCharts Pixel Maps Generator
• A pack of scripts spectacular animation of a stack of images .
• A collection of text processing effects on CSS .

Work with SVG

• Val Head gives advice on the export of vector graphics to animate the painting of contour illustrations .

Web typography

• The head of design at Booking.com Stuart Frisby talks about how they set up the connection of system fonts for different platforms .

Flexbox and CSS Grid

• Eric Meyer examines the principles of CSS Grid on the example of his site . Its browser support is growing.

Metrics and ROI

UX & NPS Benchmarks for Retail Websites
Jeff Sauro ranked 10 online stores on a combined usability metric covering product attitudes, task metrics, and user interaction quality. He also identified 19 key factors for such sites, a high score which affects the overall score.

UX strategy and management

The Colors of Design Cultures
The most powerful article by Kirill Oleinik from Capital One about their approach to determining the strengths and weaknesses of the designer. They smashed 34 characteristics on 5 topics (humanity, ingenuity, goal setting, enthusiasm, processes) and got an interesting way to balance the team. They refer to the Gallup StrengthFinder approach, something similar to PAEI's Yitzhak Adizes.



UX Maturity Models - A Collection
Natalie Hanson is trying to find the perfect UX / CX maturity model that will help bring the importance of good design to top managers. She examines a dozen models and promises to describe her - the existing ones solve her problem worse.



Poor Management = Mediocre UX Design
Nielsen / Norman Group conducted a survey of UX-specialists on how organizational processes and structures affect the quality of product design. Kara Pernice draws conclusions from statistics - what factors lead to success. The sample, however, is not very clear - often such surveys are limited to the US market, which differs from most other countries.

Steps to building a design culture
Kara Kane from the British state design team describes the notes on the construction of a design culture based on the performances of their internal mitap. It turns out a small checklist of basic values ​​and practices.

How to Collaborate with Stakeholders in UX Research
Susan Farrell from the Nielsen / Norman Group lists the main benefits that an invitation to decision makers gives to user research sessions.

How to get a Design Job at Airbnb
Tobias van Schneider interviewed Katie Dill, Airbnb Design Manager. She is very detailed and sensible about how the process of hiring and developing designers in the company.

Methodologies, procedures, standards

The Three-Hour Brand Sprint
The Google Ventures team has added a new type of sprint to work on the brand in addition to the usual and research. True, everything is very basic - a fairly standard process of determining what the brand should be.



Continuing the theme:

• And here the criticism of design sprints began. Erika Hall sensibly notes that a cargo cult began when they are used by everyone and for everything.

Scientific Thinking for Better Design
Jeff Sauro describes the approach of scientific thinking to the creation of interfaces. It is based on close work with analytics and research, formulation and testing of hypotheses.



The Elements of UX & UI Visualized
Bankai Studio has made an interesting infographic of the main methods, tools, patterns and other key professional concepts and terms.

Cases

Designing Microsoft Flow
Nitish Meena talks about optimizing the interface for Microsoft Flow, an IFTTT counterpart. As with the help of analytics and research, they reduced the scenario of creating new integrations.

MIT Technology Review
Design Studio Upstatement talks about the redesign of the site of the magazine MIT Technology Review. A good example of how to describe the work of a design studio is the correctness of the problems and the course of the decision, the effect on business is shown.

Meet The Next Smashing Magazine
Smashing Magazine is preparing a site redesign and launching heaps of new activities, including a paper magazine and a subscription to courses and webinars. The article describes the tasks and technology redesign. A beta version is already available .



Design principles - your feature
Intercom's Brendan Fagan tells how the team has increased the use of one of the product features by revising the new user training approach.

Uber Navigation
Cady Wachsman talks about card redesign in the Uber mobile app.

Designing Facebook for Mobile VR
Gabriel Valdivia talks about creating a Facebook app for the Samsung GearVR virtual reality helmet. Interesting calculations about using depth as a way to represent an interface hierarchy.

Uninvited Redesigns

• Adhithya Kumar offers several concepts of rethinking clipboard on mobile .
• The release of the Bread Time podcast about uninvited redesigns (the leading products are Facebook and WhatsApp product designers).

Story

Some European Contributions to Information Science
Overview of European scientists and thinkers who put forward important concepts and theories in computer science, which are now the basis of many interface approaches and practices.

Jonathan Grudin - From Tool to Partner: The Evolution of Human-Computer Interaction
At the beginning of the year, Jonathan Grudin published his book “From the Tool to Partner: The Evolution of Human-Computer Interaction” on the history of the discipline of human-computer interaction. A couple of words from the author .

Trends

Design in Tech Report 2017
The latest release of the John Maeda report on trends in the interface design industry for 2017. In many respects, it is based on last year’s content, which was so far the most interesting. Of the interesting things: about the new venture funds from designers (page 25) and the organizational structure of design (page 30). By the way, he launched a separate website for these reports (now they are not branded with KPCB).



Systems Smart Enough To Know When They're Not Smart Enough
Josh Clark describes the ethical problems that arise when using the first generation of smart assistants with voice control like Amazon Alexa. The issuance of search engines may not always contain accurate or even false information, and they simply read out the first result of it.



Why chatbots fail
uxdesign.cc collected the main reasons why bots are useless. In addition to this, they collected a selection of articles of the publication devoted to their creation.
True, a bunch of bad news came about some collapsing trend:

• Digiday review .
• Facebook Messenger has begun to actively promote the use of the menu instead of entering a request .
• One of the first partners to launch bots on Facebook Messenger refused to use as a notification channel .

The Kip team is aware of this and is trying to find niches where bots are in demand - for example, group ordering food. Continuing the theme:

• The interesting format of the article about typeform messengers is that there are interruptions in the form of a chat. True, it blocks scrolling and reading material is extremely difficult.

Take It Around
Andrew Kemendo describes the ergonomic, technological and interface requirements for augmented reality gadgets that will allow them to become popular. Continuing the theme:

• Lucas Rizzotto describes his vision of the future development of virtual technology, augmented and interconnected reality .

Algorithm-Driven Design Launched a collection site dedicated to algorithmic design. Here are all the examples and materials from the article and the presentation , plus what remained in the notes OneNote. It will be replenished regularly (it has already overtaken publications by the number of links), so it can be used as a reference book.



Some of the fresh materials are:

• Website Designer Firedrop continues the work of The Grid CMS and is preparing to release Sasha, an algorithmic designer assistant. You drive in content, and then it helps to choose the style and layout in the course of communication with the bot. The founder of the service Marc Crouch talks about the features of the creation of such a product and undeserved criticism, which was subjected to The Grid.
• A story about the Flow Composer tool that could write a Beatlo-like song “Daddy's Car” .
• Fast Co Design talks about the Pescado service, which optimizes the text of advertising messages for a specific user. They are trying to transfer these developments and work on the interfaces.
• At the Adobe MAX conference last year, the company showed 11 experiments with an algorithmic design called Sneaks . Another of their work is a virtual assistant, who helps to process photos with the help of voice .
• Site Designer Huu.la has implemented an experimental Typesetter feature. They analyzed about 5,000 sites and can now advise you to tweak the font sizes on the site so that they look more harmonious.

On Design Tools and Processes
Viljami Salminen writes that modern design tools are not particularly advanced with regard to working with a sheet of paper. This is still a static rectangle, which the designer shows in various ways in a dynamic way. It is more a designation of the problem, not its solution, but thoughts on the matter.

Smart watches and bracelets

• MyKronos ZeTime watches combine analog and digital interfaces . Analog hands, dial - digital interface. An interesting approach that makes the function of the watch itself work regardless of the battery.

For general and professional development

Magazine "Ergonomist" № 48, March 2017
The latest issue of the Ergonomist newsletter. Information about the Ergo 2016 conference held in the summer of 2016, the works of which are publicly available on the association's website, as well as an essay on the history of Russian ergonomics, which was sounded in an interview with A.N. String.

Books That Have Influenced Our UX Careers, part 2 - Applied UX Research
The second part of the selection of books from experts UXmatters, dedicated to user research.

Abstract series in Russian
Studio Atvinta began translating the recently released series on designers in Russian. While the first series is ready, the rest are on the way.



The best YouTube channels for designers and developers
Fabricio Teixeira has put together a collection of YouTube design video channels. Translation .

What is Design?
Excellent parody of pretentious videos about the importance of design and designers.

People and companies in the industry

Deliveroo design
Website design team food delivery service Deliveroo. They collected all the team activity, including the blog on Medium .

Ibm design
Blog design team at Medium. One of the latest articles is about how to make blockchain technology more user-friendly .

Invision

• Interview with Clair Byrd, the former head of marketing for Invision, in which she talks about the principles of working with the community .

Conference proceedings

Interaction 17
Interaction 17 conference report by Josh Clark. It took place on February 3-8 in New York, USA.

O'Reilly Design Conference 2016
Report on the conference O'Reilly Design Conference 2016, which was held January 20-22 in San Francisco, USA.

UXSTRAT USA 2016
Review of the first day of the American conference on UX-strategy, which was held September 14-16 in Providence, USA.

Humanity.ai
February 28 in San Francisco hosted a conference Humanity.ai , dedicated to bots and artificial intelligence. Design team Capital ONE talks about the themes of speeches. Also available videos ( part 2 and 3 ).

Design is [...]
Google launched a series of motivational lectures by famous designers on what design is. The blog describes what it is and why, and video recordings will appear in a separate channel on the Medium.

Google Conversions 2017
In early 2017, the fifth Google Conversions conference was held in Dublin, Ireland. Luke Wroblewski made traditional notes of the most interesting speeches:

• Ani Mohan shares statistics on the Google AMP simplified mobile web format .
• Guillaume Derolez gives tips on optimizing the speed of loading mobile sites and its effect on conversion .
• Nathalie Nahai spoke about the psychology of user behavior on mobile .
• Stuart Frisby talked about how to test the interfaces on Booking.com .
• Craig Sullivan gave advice on conducting experiments on mobile .

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