Food Design Digest, May 2019
The digest has been collecting fresh articles on interface design, as well as tools, patterns, cases, trends 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-April 2019 .
Patterns and best practices
Design Animation Handbook - UI Animation Guide
Ryan McLeod's new InVision Animation Handbook is about front-end animation. Thoughts and interviews by Google, Headspace, Lyft, and Zova Fitness. Not the largest of what they did, but in sufficient detail.
Google UX Designer David Hogue Shares How to Reverse Over-Complication in Product Design and How to Avoid It Altogether
Google David Hogue Tips for Simplifying Interfaces An intelligent systematic approach helps to understand the potential difficulties in the product.
3 Design Considerations for Effective Mobile-App Permission Requests
Tips by Maria Rosala from the Nielsen / Norman Group on the competent format and the time of requesting permissions to use mobile functions from users.
Designing for different states in the UI
Shane Doyle Interface State Design Memo. Perfect condition, empty, loading, partial, imperfect, interactive, errors, success.
Texts for the interface - how to write content in Tinkoff Business
Abstract of Anna Kochetkova’s speech from Tinkoff Business from the UX Marathon conference. Great memo for good texts in the interface.
5 things to be mindful of when you design filters
Memo Zhiyu Xue on the competent filter interface. How to provide a good selection and help the user to work with it.
Finding a Long Dash
An interesting format for typography reminders in the format of simple cards from the DocDoc team.
Designing a Dark Theme for OLED iPhones
Vidit Bhargava shows why, on OLED phones, a dark gray color is better suited for a dark theme, rather than pure black. With pure black, the animation will be blurry, and dark gray will eat almost as little energy (on OLED screens, the brighter the pixel, the more battery it requires).
Night Mode with Mix Blend Mode: Difference
One of the cheapest ways to implement a dark theme in an interface is through CSS blending modes.
'About Us' Information on Corporate Websites - User Research Findings
Tips from Anna Kaley and Jakob Nielsen of the Nielsen / Norman Group on submitting a company page.
Baymard Institute Research
Jamie Appleseed tips for seamlessly embedding videos on your product page .
Design systems and guidelines
New in Android Q and Google I / O 2019
The annual presentation of Google's Google I / O 2019 achievements was held May 7-9 at Mountain View. Collected what concerns designers.
Android Q now has a dark theme out of the box (a guide for developers ). It should be supported by the applications themselves, but for many this is a good reason to systematize work with colors and icons (for example, through tokens). Those who use standard Material Design components can relax altogether - they have support out of the box. Lecture for designers from the conference .
Other interface innovations in the tenth version:
Improved gesture control for the main navigation on the OS , the transition to which began in Android P. There is a potential conflict with the side menu to go back. The classic version with 3 icons is available during initial setup.
Support for flexible screens out of the box. The company is working on prototypes of such devices .
A section on sounds in interfaces has appeared in Material Design guidelines . Lecture for designers .
Bubbles a la Facebook floating chats will become part of the platform.
The digital wellbeing initiative had a good effect : its users reduced their phone usage at night by 27%. In Q, there will also be a focus mode with a ban on launching individual applications for procrastination.
The engine for deep learning has been powerfully optimized, so that it is now available on the device even without the Internet. Thanks to this, several powerful things appeared at once:
Smart Reply works for any messengers, quick actions are available in the notification area.
Subtitles for live video (English only so far).
All speeches from the conference for designers. Thematicization in Material Design and its application in products, design sprints for Google Assistant, design for AI, sounds in the interface, dark theme. Well, a review of the new in Material Design .
In general, after a massive update of Material Design last year, we are now talking more about polishing and gradual development. Beta version can already be put (although there is still not everything ).
5 steps for systematizing motion design
Gorgeous reminder on the description of animation in design systems from Caleb Barclay. Audit of existing solutions, key variables and scales, nature and principles, specification.
The Sound of Trust - Building a Sonification Strategy for Enterprise Experiences
Salesforce's Adam Doti talks about describing front-end sounds in their Lightning design system. Principles, patterns and excellent relevance model.
Typography in Design Systems
Nathan Curtis details the best practices for typography in design systems.
Uber Base Web - Base Web React Components
Uber design system. Announcement .
Stencil
The framework for creating design systems came out of beta .
Front-End Documentation, Style Guides and the Rise of MDX
Overview of MDX syntax and popular frameworks (Docusaurus, Gatsby, Docz, Storybook, Styleguidist, VuePress, MkDocs, GitBook) for creating live guidelines and descriptions of components.
User understanding
'Our Users Are Everyone' - Designing Mass-Market Products for Large User Audiences
Kathryn Whitenton discusses mass-market products where it’s hard to segment users. Often this leads to the compelled opinion that "our users are just about everything, so there is nothing to be done." She advises trying to separate them at least by frequency of use - this is a good first step.
6 Rules for Persuasive Storytelling
Tips from Rachel Krause from Nielsen / Norman Group for wrapping user knowledge and their product usage scenarios in clear and visual stories.
Remember me
Facebook's Lindsay Nevard shows how well-packaged user stories can help product teams in many business moments.
Why Do People Call Customer Service?
Jeff Sauro investigated situations in which customers contact customer support. They are divided by industry and specific problems.
Making the case for accessibility
Susanna Zaraysky gives advice on arguing accessibility investments for users with disabilities. Not just backed up by strong numbers, but useful.
Why I Don't Believe in Empathic Design
Don Norman is skeptical of attempts to empathize with users - if you look at the original meaning of the term, then this is hardly possible. He advises focusing on user activities and supporting them in products.
Don Norman on how design fails older consumers
Don Norman writes about the problems of the modern technological world, poorly adapted for the elderly.
Information architecture, conceptual design, content strategy
Évolt
The service allows you to work on the conceptual design of interfaces. Description of characters, scenarios, customer journey map, well, mudboards in addition.
Intercom on onboarding
Intercom has published the second edition of their book Onboarding.
New Interface Design Tools
Sketch 55
An easy way to change distances in a group of objects, view SVG code, improve printing and the interface as a whole.
Plugins
- Method : checks the indentation in the layouts to match the 8-pixel micro-module.
- AEUX : Export Sketch layouts for use in After Effects.
- Iconscout : allows you to quickly find icons and illustrations for the layout.
- A note about creating your own Sketch plugin from Amy Rogers .
Adobe xd
May update . The components are redesigned into a more mature version along with a more systematic work with styles, many interface improvements.
Figma
Templates for drawing diagrams in Sketch and Figma .
Roman Kamushken describes several approaches to creating tables .
Framer x
Finally, Framer Bridge was released , which allows you to connect components from a technological framework. They synchronize with the Framer components (which now use Git for versioning). Framer Playground
also launched with a new code editor to create its components.
Marvel
The third version of the corporate tool package has been released . They brought together all the latest launches like usability testing and help with the organization of projects and the management of the organization as a whole.
Baselance
The service allows you to store a database of freelancers with contacts, portfolios, price tags. Import data from Behance, Vimeo, Soundcloud, Instagram, GitHub and Artstation.
Project cue
An online animation tool to make it easy for developers to share. Allows you to use JSON from plugins like Bodymovin 'for AfterEffects and twist the result. Announcement from the authors .
Tilda
Website about working with Tilda - tips, examples, contractors.
Octopus
Service for creating simple site maps in a browser.
Userguiding
Service for creating training methods when meeting a new user. Tooltips, pulsars, wizards, and other popular patterns with analytics for the entire scenario.
Concepts
Tablet app for sketches and illustrations.
Wbo
Another marker board for collaboration in the browser.
Bildr
Another service that promises to combine design and the generation of ready-made code from it.
Designgapp
Service for creating static guidelines.
remove.bg
Released applications for Windows, Mac and Linux .
Abstract
Joe Woodward from the Microsoft Outlook team describes their design process based on a combination of Sketch and Abstract .
User research and analytics
Useberry
The service helps usability testing of interactive prototypes (and even assemble them inside).
UX Research Collective
The Torve user research conference was held on June 6-7 in Toronto . There is a very powerful and representative composition of dozens of speakers.
They run a sensible magazine at the Medium UX Research Collective, where they publish interviews with all conference speakers. Mandy Owen from Airbnb , Monal Chokshi from Lyft , researchers at Shopify and Patti Carlson from Mailchimp talked about team structure, integration with product teams, the role of research in the company's culture, and overall market development. AnswerLab's Chris Geison is about his vision of professional trends and challenges.
Organizers make mitaps and keep the community in Slackso it’s useful to keep track of their activities. Moreover, they publish video speeches ( last year's conference , for example).
The Science of Silence - Intentional Silence as a Moderation Technique
Kate Kaplan of the Nielsen / Norman Group describes an approach with intentional short-term silence of the moderator during user research. This allows not to confuse the respondent with thoughts and not to ask leading questions and clarifications. The article has excellent audio examples for each situation.
Usability Testing with Minors: 16 Tips
A memo from Alita Joyce from the Nielsen / Norman Group for conducting user research with children and adolescents. This is a difficult audience, while also having legal limitations in working with it.
Design partnership with users
Arin Bhowmick from IBM talks about how the format of working with sponsor users (i.e. respondents) is arranged in their version of design thinking. The product team regularly tests prototypes and concepts with them.
Visual programming and design in the browser
New scripts
- Animation of letters in the spirit of a view from under the water .
- The generator of effective streaks of paint appearing behind the mouse cursor .
- Opening new pages of the site .
- A collection of simple CSS effect scripts .
CSS grid
Visual mesh generator on CSS Grid .
Metrics and ROI
Validating a Lostness Measure
Jeff Sauro talks about the metric of "lost" users - it allows you to evaluate the navigation on the site. Does it help you find information for an acceptable amount of action.
10 Things to Know about the Technology Acceptance Model
Jeff Sauro talks about the Technology Acceptance Model (TAM), which helps you evaluate your product’s usefulness and usability. How it works, how to evaluate it, alternative approaches.
Design Management and DesignOps
DesignOps: What can we measure?
Dell's Arturo Leal describes a metric model for evaluating design team performance. They are divided into 4 categories: productivity, team health, performance and growth.
How Corporate Innovation Labs End Up Preventing Innovation
Jared Spool writes about the proper organization of innovative teams in companies. The selection of individual laboratories or startups does not always produce an effect - it is much more useful to equip the main product teams with suitable tools.
Level 6 designer - how we motivate and develop designers
Ivan Solovyov from DocDoc talks about the competency map for designers in the company.
What Mike Monteiro Taught me About Feedback
Summary of Mike Monteiro customer feedback key ideas. What to do if it is bombed and how to exhale and translate the discussion into a sound channel.
Fortifying the design career path at IBM
Eunice from IBM briefly talks about the competency map for designers in the company (now there are already 2,000 people).
Julie Zhuo - The Making of a Manager
Julie Zhuo has released The Making of a Manager. It helps novice managers to work better. I have not reached yet, but apparently, she does not focus on design management, but talks about general things. Interview about her approach to work and a book (and one more for InVision ).
A Books Apart seems to be about to start selling a similar “Resilient Management” by Lara Hogan .
Team interaction
Setting the Right Tone in Design Conversations
Dan Brown from EightShapes gives tips on having useful working meetings.
Cases
Designing for publishing tools
Vox Media's Ramla Mahmood talks about the design process for editorial tools using the Chorus Video as an example.
Our order tracker - designing a product that crosses the physical and digital divide
Deliveroo's Stephen Macvean talks about redesigning the order status tracking interface.
Trends
How Facebook designs for its billions of future dead users
Facebook's thoughts on what to do with user profiles after they die. By 2050, they will overtake the number of living (unless, of course, the product itself will still be with us).
Transitioning to a Career in AR / VR Design
Facebook's Jake Blakeley talks about getting started with virtual and augmented reality interfaces.
Voice Interfaces
Google Assistant on Google I / O 2019
Cheerfully developing as one of the points of focus. It helps drivers more actively , simplifies the challenge of popular actions , learned to recognize calls to loved ones without a name , works better with Android TV . Thanks to the deep learning engine running on the device, it responds much faster .
But the most interesting is the development of Duplex, which last year stirred up Internet users (photo). He connected to Chrome and became an assistant in filling out complex forms on the web - for example, renting a car or buying movie tickets.
They showed a reverse example - Live Relayhelp users with disabilities answer calls with text (well, or ready-made Smart Reply).
All this is connected with the initiatives of the smart home, which are now served under the Google Nest brand (instead of Google Home). Since many voice assistants go into “smart displays” (a stupid tablet on a stand, now with games ), their new Google Nest Hub Max is just like that.
Car interfaces
- Updated long-worn Android Auto . Permanent navigation bar, emphasis on working with the map.
- Raluca Budiu of the Nielsen / Norman Group parses the Tesla interface .
For general and professional development
Design critique coach
Training argumentation skills - the site asks the trainer questions for the designer to help answer design criticism.
Designer First World Problems
Pablo Stanley has been making a series of comic books about designers on The Design Team for several years now. He collected major hits in one piece.
Soft skills in UX - What makes a mediocre designer great
Tips for pumping the general professional skills of the designer from Kaja Laura Toczyska.
What "intuitive" really means
Fabricio Teixeira parses the abstract and rarely relevant term “intuitive” for specific interface characteristics.
The world needs a tech diet; here is how designers can help
A powerful long read by Fabricio Teixeira and Caio Braga on the ethics for designers, which will potentially help reduce user technological attachment.
New Rosenfeld Media Books
- Abby Bajuniemi «Designing and Researching Natural Language Interaction» об исследовании голосовых и чат-интерфейсов. Интервью с автором.
- Stephen Anderson и Karl Fast «Figure It Out».
- Jim Kalbach «The Jobs To Be Done Playbook».
- Boon Sheridan «Getting Started in UX».
- Michael Metts & Andy Welfle «Designing with Words».
- Amy Bucher «Engaged: Psychology for Digital Product Design».
Люди и компании в отрасли
How Microsoft learned from the past to redesign its future
Story about changes in the design culture and organizational processes of Microsoft, which help to unite teams of different products. This helps to glue them together, it is better to integrate the hardware and software of the devices, quickly look for new solutions for the design system and put it into practice. Translation .
D³ - DocDocDesign
DocDoc design team blog.
UX Collective - How to run the largest design publication on Medium in a remote team
UX Collective Fabricio Teixeira founder and editor talks about how the team runs one of the largest design magazines on Medium.
Shopping for design studios by large companies
- Adaptive Path completed integration into Capital One . They finally abandon the brand and, unfortunately, curtail all educational activities and conferences.
Conference proceedings
Enterprise UX 2018
The Enterprise UX 2018 conference was held June 13-15 in San Francisco. Synopsis of performances by Pabini Gabriel-Petit ( part 3 ).
Subscribe to the 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 Artemov, Denis Efremov, Alexei Kopylov, Taras Brizitsky, Evgeny Sokolov and Anton Oleinik. Special thanks to the Setka team for the editor and Alexander Orlov for the visual style.