Digest of grocery design, July 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-June 2018 .


    Patterns and best practices


    "Real developers don't use UIs"


    The most powerful analysis of the interface reasons why developers actively use the command line and prefer it to the graphical interface. IBM's Micah Linnemeier is working on professional products and wanted to get to the real pros and cons in terms of interaction, and not just typical prejudices.



    How to write any error message


    Rhiannon Jones from Deliveroo describes the company's approach to writing error messages. They divide them into several categories and choose the tonality based on this.



    Why Blue Light Is So Bad - The Science and Some Solutions


    Amber Case talks about the problems of modern screens that emit blue light - it puts eyes and interferes with sleep. Blue light provides the most energy, so in another article, she and scientists recommend the orange-red , which use the military and the same BMW.



    What Can Bike Sharing Apps Teach Us About Mobile On-boarding Design?


    Luke Wroblewski studied the bike rental applications and compared the steps you need to take before driving. Many unnecessarily complicate the process by asking for too much or abusing learning use.



    Beyond 800 words - New digital story formats for news


    The experimental laboratory is trying to understand which news formats will be suitable for the Z generation. In the first part of the article, Tristan Ferne examines the approaches available on the market. In the second design team made several interactive prototypes .



    Level up for UX - Design lessons from video games


    Alena Kirdina gives examples from gaming interfaces that are useful for regular web and mobile applications.

    How to add product features


    Dre Zhou from Askable shows how prefilling forms and avoiding completely zero results increases conversion and user comfort.

    The User Experience of Health Insurance Websites


    Jeff Sauro analyzed several major US healthcare companies and compared their usability with the SUPR-Q metric. He cites typical problems for such sites.

    Customer Service Information on Websites - The Hub-and-Spoke Model


    Kim Flaherty of Nielsen / Norman Group suggests how best to show sections of help and customer support on the site.

    Baymard Institute Studies


    Edward Scott talks about the company 's new research on profile and order management .

    Design systems and guidelines


    Design Systems London 2018


    Design Systems Conference London will be held November 15-16 in London. So far local speakers without bright stars have been announced, but the announcement has just appeared. This is the third design systems conference in addition to the Clarity in San Francisco (I attended the program last year, but the program did a great job regarding 2016) and DSConf in Helsinki.



    Eight Things You Need To Know About Design Systems


    Mikhail Gündoğdu visited many presentations about design systems and collected on their basis a good reminder for beginners.

    Design Systems at GitHub


    A chic story by Diana Mounter about the emergence and development of the GitHub design system. Phased development, examples of internal documents and processes.



    DesignOps - Unleashing the potential of our design studio


    Mark Argyle talks about the principles of the Atlassian design system team. A sufficiently detailed description of the process in typical situations.



    Six lessons learned by creating a fast-moving start-up


    An intelligent story by Anthony Zhang from Oscar Health about the gradual development of a design system in a company. How to do it without strain, slowly complementing and updating.



    Evolving a Design System at Scale


    Liz Khoo from Salesforce talks about the interaction between the teams working on the design system.



    Material design


    Review Android Go , a simplified version of the OS for cheap devices based on Oreo 8.1. Many features are trimmed on it and lightweight versions of the main applications are made (and some are based on progessive web apps).

    What will look like the updated Google applications in the spirit of Material Design 2.0 .

    MacOS


    Apple has added official templates for sketch and photoshop . Download .

    Understanding the user


    Design for Kids Based on their Stage of Physical Development


    Feifei Liu from Nielsen / Norman Group describes the features of interface design for children. She compares the development of motor skills with age and gives advice on the controls for each of them.

    Accessibility for Teams


    Memo on support users with disabilities from the team of US gos.saytov.



    Other Accessibility Materials


    Microsoft recorded a series of short tutorials on user support for people with disabilities .

    Firefox: a tool for analyzing the accessibility of the site .



    Information architecture, conceptual design, content strategy


    UXPressia 4.0


    The creators of the domestic tool UXPressia to work on a customer journey map have released version 4.0. There was a joint work and expanded tools in all aspects - the interaction cards themselves, the characters, the card of emotions.



    Pyoneer - Design Thinking Software and Customer Research tool


    An interesting integrated tool to support design thinking. It has a rich set of opportunities - customer journey map, characters, aggregation of feedback from different sources for finding growth opportunities, linking analytics. And all this is based on the “double diamond”.



    15 principles of good service design


    Louise Downe, head of design for Government Digital Services (doing GOV.UK) brings her principles for designing services.



    Storyboards Help Visualize UX Ideas


    Rachel Krause of the Nielsen / Norman Group shows how to create storyboards for use cases. They show a piece of customer journey map, and these two approaches can be combined.





    Alan Klement - Jobs to be Done at Work


    New book Alan Klement about Jobs to Be Done will be released on the border of 2018 and 2019. She describes in more detail the methods of work.

    Book Excerpt: Living in Information


    The publisher of Two Waves Books released in June 2018 the Jorge Arango “Living in Information” book on information architecture. UXmatters publishes a slice of Chapter 8 of it.

    Orchestrating Experiences


    A List Apart publishes part 9 of the book by Chris Risdon and Patrick Quattlebaum Orchestrating Experiences .

    Design and design of interface screens


    persP


    Another new design tool that plays on the Figma field is the simultaneous work of several designers in the browser. The whole set of modern features is claimed (prototyping, discussion of screens, adaptability, symbols / components). From new ideas - support for several languages ​​in the layout, exporting layouts to code and uploading to a server, quick viewing on the phone via a QR code. Announcement from the creators .



    Affinity Designer for iPad


    The tablet version of the application has been released. The first time you can buy at a discount of 30%. By the way, you can read the step-by-step guide on working with the tool from Isabel Aracama .

    Adobe Photoshop for iPad


    On Adobe MAX 2018 this fall will show a full version for tablets (now there is a simple Photoshop Express).

    Sketch 51


    Now styles can be added to libraries. Many small improvements in prototyping and the main interface.



    Plugins and articles


    Timeline 2.0 : the add-on from Anima has become even more powerful and has focused on interactive components, the code of which can be unloaded (so far naked HTML / CSS / JS, but promise React, VueJS, Angular, Lottie, iOS and Android).

    Invision


    The second version of the mobile application has been released . You can comment on tablets and phones using Freehand, quickly open Studio prototypes through a QR code.

    Adobe XD


    June update.

    Flowmapp


    Added a tool to describe custom scripts . It's great that you don’t have to suffer with this in some Sketch or mental map maker.

    Carbon


    Online service helps to make a spectacular presentation of a piece of code.

    Shotsnapp


    Another tool for the spectacular design of the interface screens.

    Modulz


    Colm Tuite compares two popular approaches to the design of interfaces - work in the tools, the heirs of printed design, the results of which are then transferred to the development, and visual programming, where there is no such transition. Since last year, he has been working on the Modulz tool, which moves in the second direction and makes it possible to visually work with components on React.



    Overflow


    A powerful example of what can be done in a tool .

    Polyplane


    Another tool for testing responsive sites in the browser. Stephen Hay, one of the key authors on the topic, considers him one of the best.

    Framer x


    They showed a video of the work of Framer X and its main features. The result was a one-piece design tool and prototyping in the spirit of InVision Studio. However, they didn’t really show a bunch of real components at React - although Framer components themselves were made at React, they aren’t spoken about connecting them to a real design system.

    Figma


    Deliveroo's Ryan Cordell tells how interface writers work with designers .

    Visual sitemaps


    The tool promises to create a visual map of the site based on the URL. While you can sign up for the beta version.

    Relate


    New interface design tool. It is positioned as a visual work based on a code (something similar to Modulz from Colm Tuite) - moreover, it is alleged that you can immediately work with components on React (but not the fact that it uses a real product). Intriguing, but so far of the details there is only an article from the authors .



    Marvel


    Userflows : The Userflows add-in allows you to automatically generate a conversion map based on the prototype.

    Flow 1.0


    The tool is out of beta.

    Keyframes


    Site-community dedicated to interface animation. One of the creators is Pasquale D'Silva.

    User research and testing, analytics


    Aurelius and Dovetail


    Services for working with the base of insights. They help aggregate user research data, feedback and other channels to find useful ideas for product development among them.



    Choose your own adventure - Sharing research with a broad audience


    Shopify's Mandeep Basi shows the packaging format of user research results that the team uses to convey insights to the product team.

    Field Studies Should Inform Intranet Redesign


    Therese Fessenden from the Nielsen / Norman Group provides tips on how to research user intranet sites.

    Providing Better UX Recommendations


    Jim Ross shows how to correctly make recommendations for improving the interface after peer review or user research, so that the product team understands them and agrees with them.

    Looking in before looking for a - A field guide for field researchers


    Shopia's Leia Atkinson provides field research tips. What and how to prepare to spend time with benefit and get a maximum of insights.

    How Much Does a Usability Test Cost?


    Jeff Sauro quotes his usability test costs for different situations and tasks.

    Seattle Global ResOps Workshop Recap - It's a Long Road


    A small report Sheetal Agarwal on mitap and panel discussion on ResearchOps.

    Visual programming and browser design


    New scripts


    Unbanal effects when scrolling pages using physics .

    Script for an interesting animation scrolling gallery .

    Brandon Dorn from Viget offers a convenient context-sensitive way to display footnotes on the web .

    React


    Meng To launched a React course for designers .

    Work with SVG


    SVGator: A step-by-step tutorial on how to use the SVG animation tool .

    Web typography


    A small review of experiments with variable fonts from Chris Coyier . It can be seen how much can be done with decorative approaches.

    Font Playground allows you to try on variant fonts in the browser and get the CSS for the selected combination.

    Work with color on the web


    Gradient Hunt : Another collection of gradients with a quick ability to pick up their CSS.

    Metrics and ROI


    Interpreting Single Items from the SUS


    Jeff Sauro gives market average values ​​for the combined SUS metric as a whole for each of its questions separately.

    UX strategy and management


    DesignOps, rapidly breaking into the trend (updated)


    I promised not to write DesignOps reviews anymore. But, of course, could not resist. I supplemented and structured my notes on the topic for the last month and posted them in the main blog - the current movement and history will be updated and replenished there. Do not thank / mother.



    S7 Airlines. UX-strategy in practice. Start


    Alexey Shaikhelislamov described S7 Airlines UX-strategy based on a speech at the Moscow Dribbble Meetup. The company aims to become more mature in terms of design and has chosen a very systematic approach.



    How are other design teams



    Responsibility Without Territory


    A smart look at the correct understanding and definition of roles in the Peter Lewis product team from Capital One. They should go from the end result and goal, and not just a set of responsibilities - this provides the result, and gives flexibility in tactics.



    The Delicate Art of Interviewing Stakeholders


    Dan Brown from EightShapes gives tips on interviewing decision makers. How and what questions to ask to get the most useful information and successfully complete the project.

    Team interaction


    A Model for Conducting UX Workshops and Exercises


    Sarah Gibbons from the Nielsen / Norman Group offers a one-stop approach for work sessions. Three stages - explain, conduct, examine the results.



    Methodologies, procedures, standards


    The Design Sprint 2.0 - What does it look like?


    Jonathan Courtney from AJ & Smart supposedly offers a second version of the design sprints - they stung the process to 4 days. True, at the same time they sacrificed the most important thing - time for understanding the problem, so now you can quickly do not what users and businesses need.

    Cases


    Building the Google Photos Web UI


    Antin Harasymiv talks about optimizing the Google Photos web interface. They found several strong solutions at the junction of design and technology, which made the work with the interface much more comfortable.



    Designing Google Maps for Motorbikes


    The Google Maps design team talks about working on motorcycle navigation and related user research.

    Uninvited Redesigns


    An alternative window manager for MacOS by Kévin Eugène .

    Story


    10 years of the App Store - The design of the earliest apps


    On October 17, 2008, the AppStore for the iPhone opened, which greatly changed the model of sales and distribution of digital products. By the decade of the store, Michael Steeber collected a history of redesigning ten applications that appeared that day and still live.



    Trends


    Market statistics


    I quarter 2018


    -11.5% - drop in tablet sales in Russia

    II quarter


    + 1.4% - growth of computer sales in the world

    Entire 2018 (forecast)


    100 million - sold smart speakers in the world

    Voice Interfaces


    The future of voice interfaces is better than that of dust-covered bots. Sales of devices are growing vigorously, and the main platforms are rapidly acquiring partnerships and integrations into everything that is connected to electricity and the Internet. By the end of the year, 100 million devices are predicted ; already 20% of American families have a smart column . Well, domestic highpojors recently stood in line for Alice. Whether you were there or not, studying the topic is useful.



    Nielsen / Norman Group conducted a thorough user research of voice assistants from Amazon, Google and Apple. It turned out a chic analysis of current problems both in the main mode of operation and in the “skills” of third-party authors. This is one of the main articles of the month - in one sitting you can get acquainted with a bunch of pitfalls. Especially a lot of complaints about the skills - they are difficult to find, they are more dumb.

    It can be seen that voice assistants have a very long way to go in order to become really useful. On the other hand, smartphones also had a lot of problems about 15 years ago, but were able to become radically more convenient and practical. In general, one of the most useful materials on the topic of voice interfaces.



    The main book - Designing Voice Interfaces from Cathy Pearl . She, by the way, manages the design of Google Assistant and recently described the main features of the design of voice interfaces.

    Each large platform has guidelines for designing interfaces for them:


    The Alexa ecosystem is best developed — it has enough tools and interesting experiments (the platform has more than 50% of the market). For example:


    At the end of July, a hackathon on creating skills for Google Assistant was held at Google’s Moscow office ( he spoke in Russian ). It involved teams from Mail.Ru Group (Delivery Club, ICQ, Pandao, All pharmacies), Clever Pumpkin, Eora.ru, Heads and Hands, Just AI, Redmadrobot, Restri AO and X5 Retail Group. The concepts themselves are secrets, but I’ve got the criteria for evaluating a good skill for you . So to say, hot report :) You can experiment yourself through Dialogflow constructor .

    A bunch of recent news and relevant statistics can be found on the Voicebot website . But just a couple of relatively fresh articles on the topic:


    This is just a small section of interesting and important pieces for the designer. Keep yourself informed, there is a chance that will soon come in handy.

    Algorithmic design


    Unintended Consequnces


    Justin Wetz from IBM offers an approach to optimizing algorithms, similar to the well-proven procedure for improving drugs.

    Adobe is using AI to catch Photoshopped images


    Adobe learned to catch photos that were changed on the computer.



    Car Interfaces


    Audi: Overview of the new information system .

    For general and professional development


    What Is This Thing Called Design?


    An explanatory example of a story about “what is design” for beginners from Khoi Vinh.

    People and companies in the industry


    Facebook Research


    Blog user research team Facebook. In a recent article, Jessica Drum talks about the company's approach to navigation testing . Everything is pretty standard.

    Conference proceedings


    Enterprise UX 2018


    The Enterprise UX 2018 conference was held June 13-15 in San Francisco. Summaries of the most interesting speeches from Natalie Hanson:


    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: