Food Design Digest March 2015

Patterns and Best Practices
Baymard E-Commerce Product List Usability: Report & Benchmark
New Baymard Institute report on product listing pages on e-commerce sites. Publicly available excerpts from it:
- On the importance of indicating unit prices, even if packaging is sold .
- On the importance of indicating the number of voters next to any rating numbers . I wonder how their perception changes with age.
Getting Users Back From Multitasking
Ben Watanabe parses the multitasking mode in iOS as another way to make working with the application more useful. It shows a smaller version of the last open screen, although it would be much more useful to replace it with squeezing the latest information from the application.
Infographics: Crib by the size of graphic elements in social networks.
Detailed crib by the size of graphic elements in social networks. Facebook, Twitter, LinkedIn, Google+, Pinterest, Instagram, YouTube, Vkontakte, My World, Classmates.
The Low Hanging Fruit of User Onboarding A
history of ways to educate users on getting started with the product and a look at their future from Des Traynor.
Excerpts from the latest UXPin interaction design book
- An article about affordans .
- Four tasks for text in interfaces (greeting, navigation, actions, service) .
Continuous Input In Mobile Devices - Pain Or Gain?
Igor Fastovsky parses keyboard input on mobile using swype-like gestures. He offers several improvements for him, allowing to solve two main problems - some of the characters are not visible, and the user does not always remember where the next letter he needs is located. The decision is controversial, but interesting.
Accessibility APIs: A Key To Web Accessibility
About the technical aspects of creating an accessible environment in a web browser and a little about the history of the issue. For one, the article is for techies, but usability should be an interdisciplinary field. Without understanding the limitations or opportunities that technology presents to us, effective work is impossible. And in this article it is very clearly explained what you can pay attention to when working on the availability of the web environment.
Animation Patterns in Famous Applications
Beyond Blue Links - Making Clickable Elements Recognizable
Hoa Loraner lists the rules for selecting interactive elements in an interface.
Niice - A search engine with taste
The Niice app for iOS, a tool for creating mudboards, has been released.
Customers Who Bought This Item Also Bought ... Affinity Analysis Explained
Jeff Sauro on how the offer formula for similar products works in online stores. The article has visual calculations showing how the relationships between them are checked.
How the length of the landing page affects its conversion
When to choose the short, and when the long version.
UX Archive Animated
Now UX Archive also collects animation examples in mobile applications.
Mystical guidelines for creating great user experiences
An amusing parallel to the design process with how the Torah describes the creation process. Rather funny than useful, but no one has come from this side yet.
The Curse of the Mobile Strategy
Jared Spool about the curse of mobile strategy. Concentrating on only one channel significantly reduces the choice of options. You should think and act at the level of a general product strategy, not limited to one of them.
User understanding
67 Ways to Increase Conversion with Cognitive Biases
Jeremy Smith has compiled a cool collection of 67 cognitive biases that are used to control user behavior. The collection is quite serious and extensive. It clings that the article begins with contraindications for use and the principle of “do no harm”.
Winning Over Wary Participants
People behave differently, including usability testing participants. For some participants, testing is stress, unnecessary worries. Jim Ross gives several behavioral techniques that will prevent or reduce excessive user excitement during testing.
People Don't Read, They Scan
A selection of theories and concepts on the topic that users are more likely to scan rather than read texts on the web. The ending and conclusions are blurry, but the article has many useful references on this subject.
Positive Design Reference Guide
The book “Positive Design Reference Guide” by S. Jimenez, AEPohlmeyer and PMADesmet, which has collected 29 models, theories and frameworks dedicated to the “well-being-driven” design, which leaves the user with a good user experience.
Design for Asia
Change Blindness - Why People Don’t See What Designers Expect
Kathryn Whitenton on “Blindness to Change” - why users don’t notice some small changes on the website or in the application that they, as the creators of the product should have noticed. For example, the appearance of error messages or about successful completion, filtering the results.
Understanding Context: Environment, Language, and Information Architecture
Excerpt from Andrew Hinton's book, Understanding Context: Environment, Language, and Information Architecture. The book is devoted to understanding the current context of the user, and this chapter discusses the importance of stories in describing interaction experiences.
In Design, Empathy is Not Enough
Dan Saffer that sometimes empathy is not enough to create a good design. For optimal results, a balance must be struck between empathizing with the user and observing user experiences from an unbiased point of view. Both extremes do not lead to better results. Continuing the topic:
- An interesting approach to the development of empathy among designers and developers. The service considers the weight of the pages of the site in the money of different countries, how much it will cost to visit .
Design for the elderly
Information architecture, conceptual design, content strategy
Card Generator
A simple online service for preparing card sorting from Lukas Mathis. You need to enter the terms in the column and you can get their printed version, marked on the cards.
Service Design: An Introduction to a Holistic Assessment Methodology of Library Services A
memo on the basics of service design and a case study for their application at the University of Michigan library. Little new information, but fairly well and detailed on the shelves.
Design and design of interface screens
Adobe Comp CC
Adobe has released the Comp CC prototyping app for the iPad. Basically, it is not much different from other similar tools, but in practice, very pleasant solutions in detail. And most importantly, you can transfer the work to InDesign, Photoshop or Illustrator for further development. Well, in general, it is built on Adobe technologies, which means it is perfectly tied to other services - including Typekit. Khoi Vinh participated in its creation.
Bind - Building an experimental UI design tool
Alastair Monk makes his own tool for Bind designers. You can’t try it yet, but it talks about its basic principles - versioning with Git, adaptability by default using Grid Style Sheets.
Napkin - Design quick mocks, directly on your phone
Another prototype app for mobile apps right on your phone. So far, only iOS.
New to Sketch
- Quick preparation of materials for the AppStore .
- Integration with Marvel .
- Apple Watch Sketch Templates by Meng To .
Balsamiq 3 The
third version of Balsamiq has been released.
Introducing Noun Project for Mac
The Noun Project has released a Mac app. A subscription costs $ 9.99 per month; there is a 14-day trial.
Pixel Squid
A new trend is emerging - stock images with the possibility of detailed settings before downloading and easy to use after it. First - choose an image from a quickly replenished collection, select the desired angle (!) And get the image in PSD; everything in layers, even lighting; masks for quick selection and quick isolation. The second is Illustrio - stock vector, before downloading you can change many parameters (for each picture your own), for example, lengthen the arms of a robot or repaint the color of a medal. Continuing the topic:
- A small instruction for working with Illustrio service and translating vector illustrations in SVG .
ai2html
Plugin for Adobe Illustrator, allowing you to overtake graphics from layouts in HTML5.
Nietzsche Ipsum Nietzsche-
style text generator instead of lorem ipsum.
Work with iOS8
Publishing Tools
- The creators of Aesop are launching Lasso, another publishing tool in addition to Story.AM . This is a $ 129 WordPress plugin.
- Nikita Obukhov put together a selection of strong long reads on Tilda, including key hits .
- Interview with Roman Mazurenko, one of the creators of the domestic publishing platform Stampsy .
How To Create Effective App Screenshots for Your App Page
Explanatory guide for preparing screenshots for Android, iOS, and Windows Phone app stores. Melanie Haselmayr provides a checklist of the necessary information and graphics for various platforms, and also discusses several approaches to assembling the illustrations themselves. Continuing the topic:
From Page to Stage to Screen - Designing an Omni-Channel Experience
Traci Lepore tries to highlight the environmental features for the types of platforms - desktop PCs, tablets, phones, kiosks, mailing lists, social networks. Each has its own capabilities and limitations, which are important to consider when cross-channel interaction between them.
New for Material Design
New for Pebble
Apple watch
- A little about how, in the conditions of strict secrecy, companies test their applications on the device .
- Test laboratory, which explores the scenarios and features of the use of watches for sports .
- Sketch templates .
- Implementation of a proprietary CSS physical activity indicator .
- A small case for creating a Wunderlist version for watches .
New for Android Wear
- ELEKS has unveiled its vision for the Tesla app as a follow-up to a recent similar concept for the Apple Watch . Both cases show great differences in the approaches of the two platforms, threatening to become the most common.
User research and testing, analytics
Evangelising user research The
time for fat reports that no one reads has passed. David Travis provides an overview of simple and effective lean-based methods for analyzing and presenting user research results.
The User Is Drunk
An excellent new approach to testing interfaces - Richard Littauer for $ 250 will check your site in a drunken state. The output is a report with the problems found and a screencast.
How Hard Are Your Surveys to Take?
Jeff Sauro offers a methodology for checking user surveys so that their results are better. He called it SRS (Survey Respondent Score) and it’s something like Nielsen’s heuristics, which are recommended to run the survey before running it.
A Beginner's Guide to Web Site Optimization
Good training manual during A / B testing from Charles Shimooka. How to coordinate with other teams, choose tools, analyze results.
Does Response Timing Matter in Online Research?
Jeff Sauro is trying to understand how the response rate of respondents in surveys affects the quality of the assessment. This will allow you to use the data during the study, without waiting for its completion. Previous studies either do not show influence, or indicate that responders are faster more supportive. Findings from his experiment show that there is no significant effect.
Should Your Entire Product Team Observe Usability Testing?
The UXMatters discussion about why it is important to invite the entire team to user research sessions.
Uxeria - Remote usability testing and marketing tool
Another Uxeria remote usability testing tool. Everything is fairly standard in terms of features.
Visual programming and design in the browser
Tumult Hype 3 Pro - The Next Revolution in HTML5 Animation
The third version of Hype Pro has been released. Interactive reusable animated objects with a physical model and adaptability for sites, iBooks, advertising.
New for Quartz Composer
- Anton Kartashov began a series of articles for beginners to work at Quartz Composer. This is a summary of the first chapter of the official user guide .
- Another Origami mini tutorial by Francis Cortez . He talks about version 2.0 using material design as an example.
- Anton Kartashov has compiled an excellent guide describing the 50 most used patches in Russian . Accompanying article .
Component systems and live guidelines
- A story about SC5, a framework for creating live guidelines, as well as basic instructions for working with it .
- GitHub Primer Live Guideline .
- Guidelines Purple for the Heroku platform .
Web Typography
- Detailed cheat sheet for special typographic characters on the web and on the keyboard .
- Type.js is a library for easier implementation of normal typography on the web .
- Ways to make superscript characters in CSS .
- Using the font event API for softer loading of web fonts .
CSS animation
Work with SVG
- About working with SVG sprites .
- Three ways to use SVG sprites for animation .
- An almost useless, but funny from the point of view of alternative vision, approach to creating vector icons in code using ASCII graphics . Alternative SVG from a parallel universe.
- Good visual reminder for working with vector icons . What formats to use for different platforms, how to export files, which tools are better to use.
- The gorgeous online presentation by Sara Soueidan on using SVG for a wide range of tasks and its advantages over CSS . Infographics, fonts, icon sprites, animation, etc.
- A library for generating SVG patterns for subsequent data visualization (for example, evening D3.js) .
Work with color on the web
Work with Flexbox
- A quick overview of Flexbox features and the six most requested patterns for its use .
- Clear and clear cheat sheet for Flexbox .
- Chris Wright makes a visual reminder of the main situations in which the use of flexbox gives advantages over the usual ways of building a grid . This is a division of the page into several parts with the same height and cards that look neatly together.
New scripts
- The generator of circular menus .
- Using CSS animations to create pretty realistic watches (look at the arrow :-)
- Semi-automatic creation of pixel graphics (plug-in to Photoshop).
- Effectively switch photos in the gallery .
- A fresh bunch of experiments from Tympanus .
- CSS and JavaScript solution for breaking content into multiple content-dependent columns .
- A great library for realizing the folding effect .
- Flickity script for implementing adaptive and touch-oriented carousels .
- Dynamic presentation of data on the map using amCharts .
- Another series of scripts with animating input fields in CSS .
- A few more downloaders on SVG .
- How the standard input field for digital data behaves in different browsers on the big web and mobile .
- A script that allows using the button on the site to quickly switch its mobile and large versions .
Xcode for designers
Metrics and ROI
One Magic Formula to Calculate User Experience?
Wouter de Bres is trying to derive a universal UX formula. It uses load time parameters (technological and cognitive), value and quality of interaction. There are many controversial points and inconsistencies, but the idea itself is interesting.
Design of government sites
- Another example of government analytics from the US government . There is no reference to the scenarios, as on Gov.uk, but overall useful numbers.
Management of front-end projects, processes and teams
No Dickheads! A Guide To Building Happy, Healthy, And Creative Teams.
The most breathtaking team-building article from Rhys Newman. He analyzes in sufficient detail the values that should underlie a strong and well-coordinated team capable of creating cool products. One of the best materials on the topic.
Understanding and Influencing Business
Liam Friedland is trying to shift Michael Porter's value chain to design projects.
What does Pair Design look like?
Pair programming is a fairly well-known method. Chris Noessel and Cozy's Suzy Thompson talk about pairing design.
False Dichotomies
Lukas Mathis on how to avoid a false dichotomy when discussing design decisions. Often in the process of a dispute, a team splits up around a couple of options and sets the scene heated by a dispute, instead of digging further and finding other approaches.
Product Management and Analytics
Overthinking vs. Underthinking - Finding the Sweet Spot
A good Kingshuk Das column on biases in pure design thinking and classic strategic business planning. The first generates a lot of motivating, but not tied to life and business ideas, the second - an endless set of analytical materials in which it is difficult to make an informed choice. He offers a table of situations in which the first and second approaches are applicable.
Cases
Disney's $ 1 Billion Bet on a Magical Wristband
Disney MagicBand featuring frog, arguably the biggest UX project of the decade.
Everything is on schedule: how monitoring user activity on the main Mail.Ru helps to live and ...
My colleague Olga Kuritsyna talks about the analysis of the main Mail.Ru page in conjunction with major events in the country. It is interesting how offline events affect the work of a large audience with web services.
Considerations When Conducting User Research In Other Countries - A Brazilian Case Study
Claire Carlson shares his experience with user research in Brazil. What you need to consider in this market, in particular and in general, when conducting international research with departure to the country.
Redesign Cases
- Толковый мини-кейс работы над аналитическим кусочков в Intercom. Пользователи просили аналитику, т.е. простой набор не очень полезных графиков в их понимании, но дизайнеры хотели понять, для чего им нужна эта информация, чтобы предложить более подходящее решение.
- Рассказ о редизайне The Seattle Times от Mike Monteiro. Он говорит в том числе о важности работы с отделом продаж.
Тренды
Readable Wearables
A new era for the web is opening up - adaptability takes smart watches into account. Matt Griffin talks about how they adapted Bearded's website for very small screens.
Google HATES Your Non Mobile Site
Craig Tomlin on the new Google search engine rules, which now takes into account not only the availability of the mobile version of the site, but also its quality. According to colleagues, the company pays attention even to the correspondence of the capabilities of the large and mobile versions. The article is a simple training manual to find such problems. Continuing the topic:
- A quick overview of how to optimize mobile sites for new requirements using Google Webmaster Tools .
Phablets
Автомобильные интерфейсы
- Дизайн-студия USTWO представила занимательный концепт, описывающий переосмысленный подход к дизайну приборных панелей автомобилей.
- Вставил пять копеек по поводу концепта приборной панели от ustwo. Надеюсь, будет больше поводов написать о теме, которой интересуюсь уже лет шесть :)
- Еще один концепт автомобильного UI от неавтомобильной компании. На этот раз дизайн для большого скрина Tesla.
Design In Tech Report 2015
John Maeda's report on the significant increase in the role of design in modern technology companies over the past few years. Designers found successful companies, large companies buy design studios, designers become partners in venture capital companies.
Virtual and Augmented Reality
For general and professional development
UX Reactions
A collection of gifs on topical aspects of design work. A good way to diversify project correspondence.
The Web's Grain by Frank Chimero
An article based on Frank Chimero's presentation on professional philosophy, in which he tries to redefine the current understanding of the role and tasks of the designer in the modern web. An interesting approach to responsive design and the overall environment for which products are created.
Helvetica / Objectified / Urbanized: The Complete Interviews The
book "Helvetica / Objectified / Urbanized: The Complete Interviews" has been released, which has collected 100 interviews from three well-known design films. Fast Co Design publishes part of a conversation with Dieter Rams from there .
Announcements of trainings and seminars
- Bang! Bang! Studio запускает онлайн-школу для иллюстраторов.
- Яндекс запустил школу дизайна. Набирают 30 человек для бесплатных занятий по вечерам, посвященных работе дизайнера в крупной продуктовой компании. Небольшой анонс.
- На Цукерберг Позвонит вышло развернутое интервью с представителями Британки, школы Артема Горбунова и школы дизайна Яндекса. Сравниваются подходы, программы, условия.
Новые онлайн-курсы
- Обучалка от Gibbon University.
- Обучение дизайну, разработке и маркетингу в формате 5-секундных гифок.
Designing for Medical
Ted Goas writes about the features of the designer’s work in a company that provides medical services. Due to strict laws on the protection of personal data in the industry, increased secrecy, and user equipment is often prehistoric. But the tasks themselves and the opportunity to help real people are wildly interesting.
Critical Sharks
A very sensible discourse on whether it is possible to criticize the work of large companies. Of course, they have to take into account thousands of nuances and act within strict limits of time and resource limitations, plus all this in an aggressive competitive environment. But without dialogue in the industry, it will be more difficult for her to develop. The occasion itself (iOS7 release) is already rotten, but the material is fresh and the theme is still relevant. The third part of the link is the most sensible. Part 1 and 2.
Translation of MailChimp's The UX Reader by FRII
- Part 3: How we conduct research .
- Part 4: Design .
- Part 5: Patterns and SVG animation .
- Part 6: Development .
- Part 7: Creativity and roadmaps .
Web UI Design for the Human Eye - Colors, Space, Contrast
Another book from UXPin this year, this time about colors, indents and the necessary level of contrast in the interfaces.
Excerpts from Golden Krishna's The Best Interface is No Interface
Ergonomist No. 40
The next, 40th issue of the Ergonomist newsletter was published. In it you will find materials devoted to the problems of professional assessment and selection of personnel, information about new conferences and publications, as well as several funny ergonomic “diversions”
The Value of Apprenticeships in Cooking and Product Design
Melissa Mandelbaum compares the experience of internships in design with how they study novice cooks and talks about his arrival in the profession.
People and companies in the industry
The Demise of LayerVault and the Market for Creative Tools
Another sudden news this year is that the version system for LayerVault designers is closing . The last year and a half, new tools for designers appeared almost every week, and then suddenly one of the oldest and most famous among them left the market. Khoi Vinh ponders why and whether it touches the rest. Perhaps this is due to the purchase of a similar Pixelapse Dropbox service - a monstrous competitor has appeared that has greatly undermined the development prospects.
How they got there - A book by Khoi Vinh
Khoi Vinh released the book How They Got There, fourteen in-depth interviews with renowned designers. They talk about their careers in detail, with all its strange twists. The first of them was published as a probe , with UX researcher Erika Hall . It turned out that she lived in Russia for some time and knows a little language. Continuing the topic:
- Tobias van Schneider on how playing World of Warcraft helped his career .
- How Vlad Golovach began his career .
New AMA Sessions
Conference proceedings
Conference Review: UX Strategies Summit 2014, part 1
Pabini Gabriel-Petit report on the UX Strategies Summit 2014 conference held June 10-12 in San Francisco, USA. A fairly detailed compendium of several keynote speeches, although Kelly Goto has been repeating its presentation for more than a year.
Video from Interaction15
Video from Interaction15 held on February 9-11 in San Francisco, USA.
Fresh links can also be tracked in the same Facebook group . Thanks to everyone who also publishes links in it, especially Gennady Dragun, Pavel Skripkin, Dmitry Podluzhny, Anton Artemov, Denis Efremov and Evgeny Sokolov. More and more materials appear in reviews thanks to them.
Subscribe to Newsletter
A letter arrives once a month.