📜 ⬆️ ⬇️

Product Design Digest February-March 2014

For four years now I have been publishing regular reviews of fresh 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-January 2014 .

Review of fresh materials, February-March 2014


Patterns and Best Practices


Really Good Emails - The Best Email Designs in the Universe
A collection of patterns of good mailing lists. They are categorized for easy navigation. In addition, a collection of responsive mailing patterns .

User Onboarding - A frequently-updated compendium of web app first-run experiences
Site dedicated to the analysis of onboarding patterns.
')
Design Details: Paper by Facebook
Brian Lovin examines the interface patterns of various mobile applications, starting with Paper from Facebook. Continuing the theme:

9 Tips for Maximizing Mobile eCommerce Sales
Craig Tomlin cites several important rules for optimizing online stores for mobile. Continuing the theme:

Find guidelines on the web. The fastest way to brand assets.
A collection of design guidelines for the largest web services. These are links to official pages with quick reference to the corporate color. A little more on the topic:

Tips Maxim Ilyakhov
Maxim Ilyakhov structured his advice on texts in interfaces.

Precomposed Touch Gestures
Gesture templates and animations for them in mobile applications, collected in the form of Quicktime video pieces.

Killing Off the Global Navigation - One Trend to Avoid
Jennifer Cardello and Kathryn Whitenton talk about the tendency to hide global navigation in the drop-down mega-menu that comes to desktop computers from the mobile web and the risks associated with it.

The Magnifying-Glass Icon in Search Design - Pros and Cons
Kathie Sherwin's study of search field design and using a magnifying glass icon. Conclusions: 1) You should visually select the search field. 2) The icon with a magnifying glass is quite distinguishable by users and the use of the inscription “Search” on the button is no longer necessary. 3) The icon itself should be as simple as possible, large and contrast.

Four Things I Wish Every Chart Did
Des Traynor proposed 4 ideas to improve the interactivity and informativeness of graphs and diagrams.

Notifications are a UX Anti-Pattern
Stephen Conn writes about the problems of notifications in modern smartphones and on other platforms. Other publications on the topic:

Responsive Strategy
Brad Frost considers the pros and cons of 5 possible strategies for the implementation of adaptive design.

Intranet Information Architecture (IA) Trends
The main conclusions from the Nielsen Norman Group report on the information architecture of intranets: 1) The main problem is the creation of clear names for the navigation options in the menu. 2) Information architecture 86% of the intranets studied are based on user tasks. 3) Average number of parameters in the main navigation menu: 7.6. 4) The most common English names for intranet sections. 5) The tendency to use the mega-menu for the main navigation.

List Beats Grid - Linear Feeds Two to Bet Times Than Grids
Case optimization of the Prismatic service interface, in which they came to the conclusion that for their tasks the placement of news items in a list is 2-3 times more efficient than in the form of a grid (cards). Teehan + Lax about the project .

The “Psychological” Speed ​​of Mobile Interfaces
Oz Lubling is about the psychological "secrets" of how to increase the user-perceived speed of mobile interfaces.

Outdated UX patterns and alternatives
Brian Krall considers many of the modern interface patterns obsolete. And offers alternatives to them.

Socialize Your Learning Content
A small note by Kevin Dolley from Autodesk on how to build a help and support system for users on Twitter.

Data Monday: What is Share on Social Media?
Luke Wroblewski collects statistics on the use of social buttons "share" on various sites. His statistics on more than 18 million views: are divided on average in 0.25% of cases; for some sites / articles, the indicator can rise to 1%. Continuing the theme:

Break Grammar Rules for Clarity
Hoa Loranger about the features of writing web texts. To increase the speed and ease of reading texts, it is possible to break some of the grammatical rules: for the sake of clarity and brevity, use grammatically incomplete sentences; write short numbers using numbers, not words; short paragraphs of 1-2 sentences are allowed (traditionally the recommended size of paragraph 3-5 of sentences). Their April Fools version .

Gesture markup language
Another system of gestures designation in touch interfaces using icons.

4 Design Patterns That Violate Back-Button Expectations
Christian Holst talks about user expectations of using the back button in mobile and desktop browsers and how the design can break these expectations.

Optimal Techniques for Strategically Displaying Web Forms
Eva McKnight describes 4 ways to display web forms.

Better Page Takeover Ad Design - Finding the Sweet Spot
Scott Harriman on how to make better for the user full-screen banners. The topic is slippery, but the product must earn and this advertising format is profitable, so it’s time to think about how to improve banners, too.

Understanding the user


Cognitive Lode - Brain gems for decision-makers
A nicely designed and visually presented site with a description of unexpected facts on the behavior of users who a few years ago popularized including Dan Ariely.

Designing apps for the visually impaired
Elliot Jackson describes in a blog design features for people with color disorders. It shows what they express and how to work with them. Continuing the theme:

Designing for Different Types of E-Commerce Shoppers
Amy Schade from Nielsen / Norman Group identifies 5 behavioral archetypes of visitors to e-commerce sites: 1) “Determined with the product” - those who know well what they really want. Speed ​​is important: came to the page of the desired product - checked the details - bought; 2) "Leisurely buyers" - those who want to spend time on your site. They browse the site for fun, hoping to find something new and interesting. Important: new items, bestsellers and discount goods; 3) "Researchers" - those who have not yet decided on a specific product or site, who understand and research. Important: a detailed, simple description of the goods, an explanation of incomprehensible terms, reviews, reviews, product comparisons; 4) “Success Hunters” - buy a good product as cheap as possible. Important: easy access to products on sale, clear information about discounts and promotions, the ability to quickly use discount coupon codes; 5) "Casual / disposable buyers" - those who came to you for the first time and those who are not going to visit your site after making a one-time purchase. Important: clear navigation, description of products, a site that creates trust, the ability to make a purchase without registration.

How to Help Your Users Take Action
Stephen Wendel describes the behavior of the user - the conditions under which he is ready to take action with the product. This is a funnel model of five triggers - stimulus, reaction, evaluation, opportunity, the right moment.

The Reciprocity Principle - Give Before You Take In Web Design
Raluca Bidiu from the Nielsen / Norman Group writes about when to ask for personal information or access rights from the user. For example, in the case of free reports on company websites, one of the studies says that it is better to ask for contact information after - the response is higher.

Development Impact and You
A collection of free tool templates for social innovation and behavioral design.

The Effects of Typography on User Experience and Conversions
Tommy Walker's research on the impact of typography on UX and conversion.

Tools: information architecture, design and design of interface screens


Android Wear Design Guidelines
In mid-March, Google announced Android Wear, an operating system for wearable devices. And immediately became available interface guidelines to it. Other resources and publications on the topic:

Macaw - The Code-Savvy Web Design Tool
Macaw came out of beta, a new modern tool for designers and designers to replace heavyweight Photoshop. Like Sketch, it simplifies the workflow, but it goes further and promises visual programming, which leading designers have long dreamed of. The output is clean and neat HTML and CSS that supports adaptability.

Nokia X Design Guidelines
Last week, Nokia officially showed its Android-based smartphones with an interface close to metro. The choice of platform is quite controversial, given that the company already has Windows Phone and Asha, and the creation of its solutions based on Android requires huge investments (the kernel with free code is getting smaller every year). But the official design guidelines appeared.

Creators of Origami's Live Chat with Creators of Prototype UX
Origami for Fast Co.Design question and answer session. A framework for prototyping mobile applications and their animation from Facebook designers based on Quartz Composer. It makes it easier to work with a tool that is fairly non-trivial to an inexperienced user. Continuing the theme:

The Periodic Table of Storytelling
Periodic table of storytelling, created by James R. Harris. You can spend hours analyzing the archetypes that make up the history.

Recordit - Fast Screencasts Video Recorder
The Recordit application for Mac allows you to easily record screencasts of application operation and export them to GIF if you wish.

Journeys by Universal Mind
The first iPad application to create Customer Journey Map ($ 5).

Tilda
Nikita Obukhov from FunkyPunky announced his Tilda service for creating long-reads. This is a convenient visual editor with support for multiple content modules and adaptability, which is suitable for single-page promotional sites.

Velositey - Website Layout Builder for Photoshop
Another service for creating interactive prototypes of mobile applications based on PSD-layouts. Interestingly, it is compatible with Bootstrap.

New Sketch Resources
Another bunch of resources on the application for designers and designers Sketch:

Iconic - Advanced icons for the modern web
Iconic Service is preparing a tool for creating and using modern vector icons in SVG that support animation and multicolor. By the way, in the middle of last year, Microsoft offered to add the OpenType standard so that the fonts support several colors . Other materials on the topic:

Apple Design Guides and Resources
Apple restructured its design guidelines on the official developer site.

As we talked with Adobey
Interview with Photoshop UX-designers from the Samara Cloud Castle team. Many interesting things about where the product is moving and how they work on it. In English .

Responsive Design Frameworks - Just Because You Can, Should You?
Jen Kramer considers the nuances of using ready-made design frameworks like Bootstrap and Foundation. They allow you to assemble your own design on the basis, so now decisions based on them are quite common. For example, the fairly well-known Startup UI Kit from DesignModo is based on Bootstrap .

Ink - Photoshop documentor plugin
Another Photoshop plugin to assist in the transfer of specifications for design layouts to the developer. Describes the main styles of visual design and text, as well as sizes. Render.ly , another similar plugin, promises deep integration with the development process.

Kimono - Turn websites into structured APIs from your browser in seconds
Kimono tool allows you to turn any site into a supplier of structured APIs. A strong opportunity to replenish your product with the necessary content. Review from Fast Co Design .

New materials on iOS 7

8 Pure CSS Mobile Devices
Eight templates of smartphones and tablets on Android, iOS and Windows Phone, made in pure CSS. They are available in different colors and orientations. And more familiar iPhone 5s templates in the form of PSD .

Animatron - A stunning and powerful online HTML5 animations
Online service for creating HTML5 animations. It is inserted as an EMBED code, or exported to GIF and video.

Ridero Publishing System
The Ridero service facilitates the layout of electronic books and their preparation for paper edition. Vlad Golovach recently complained that there are few authors in the national profession. If you wipe the book too boldly, then publishing a small e-book with a series of articles is quite a feasible task.

Refills
Another Refills designer for quickly building projects. Made on the basis of the CSS framework Bourbon and its add-ons Bitters and Neat.

How designers can create interactive prototypes with Illustrator
Tom Germeau talks about how to create interactive prototypes in Adobe Illustrator. The output is an SVG graphic that scales well.

Building Clickthrough Prototypes To Support Participatory Design
Svetlin Denkov's tips for effectively creating interactive mobile prototypes in the Pop app.

Flagsmith - A Flag Building Typeface
Cool designer flags of countries in the form of font icons.

Hintarea
Service to quickly create step-by-step help or instructions on the site.

User research and testing, analytics


Are Most Winning A / B Test Results Misleading?
Why the results of A / B testing in practice do not give the same increase in conversion as in testing? The results of only 1 test out of 8 performed show a statistically significant change in conversion. Most test hypotheses do not make any difference. Also be interesting:



Is Observing One User Worse Than Observing None?
Sometimes a customer representative can attend only one usability testing session. Whether it will create a picture at the customer? Does it hurt? Jeff Sauro understands the intricacies.

Paper prototyping is a waste of time
Jake Knapp, Design Partner at Google Ventures writes that using paper prototypes in user research is a waste of time.

Open Device Lab, in a suitcase
Chic suitcase with test devices, which uses the British studio Etch. The article describes in detail how it works and how to make one yourself.

Modern I-trackers and their usability testing capabilities
The study of Anatoly Kostin and Maxim Korolev on comparing the capabilities of various modern eye-tracking devices and evaluating their suitability for use in usability testing. The second part .

Build Your Own Participant Resource for UX Research
Millicent Cooley writes about how to build your own database of respondents for user research. The approach has its own problems, but it is cheaper and faster to hire through a recruiting agency, plus it makes it easier to conduct advanced research. Continuing the theme:

A little effect on your next usability test
David Travis about a factor that is often forgotten, but which can have a critical value on usability assessment results - the effect of the observer. The coincidence in the evaluation of usability problems between different observers during the same test is only 40-50%. Antidote: the use of clear definitions of the levels of usability of problems (so that different experts have the same understanding); evaluation by several experts followed by discussion and synthesis of the results.

14 Usability Testing Tools Matrix and Comprehensive Reviews
Comparison of 14 tools for usability testing on a single diagram (a variation on the Gartner Magic Quadrant), as well as detailed reviews in the Craig Tomlin article. The general conclusion - any of the tools can be useful in their own particular situation.

10 Ways to Get a Horrible Survey Response Rate
Jeff Sauro describes 10 sample errors during user surveys. His recommendations for translating questionnaires into other languages .

Method 25 of 100: The Monetary Method
The Autodesk team continues its UX method reference. # 26 describes the critical incident technique.

frogMob
An interesting project from frog Design - crowdsourcing of user research, primarily ethnographic. Researchers download interesting findings in the course of their real projects, which show the latest trends in the interaction.

Guerrilla Usability at Conferences
Nick Cawthon shares the secret of how a usability specialist, visiting fairs and conferences, can combine two-in-one - and listen to the reports, and conduct on-site research.

Designer's Toolkit - A Primer On Capturing Research
A series of articles from Lauren Ruiz from Cooper Consulting about the technical tools of the designer. In the first part - analysis of various methods of fixing the results in the study of users. Continued:

Define Micro Conversion to Measure Incremental UX Improvements
Tips Jennifer Cardello on measuring microconversions - minor conversions that are not directly related to the main goal of the site.

Management of interface projects and processes


Better UX Internships
Jim Ross’s excellent material on why internships in companies are often negative for both the employer and the trainee himself. He examines in detail the causes of failures and makes recommendations to both parties.

How Mature is your organization when it comes to UX?
Model UX maturity from the company Keikendo.

Stop Dancing Around Criticism from Airbnb's Head of UX
Airbnb Katie Hill tips on how to criticize design. And painted on both sides - the presenter and the critic.

Google Ventures: Your Design Team Needs A War Room. Here's How To Set One Up
As in Google Ventures, we set up a workspace for designers, making effective “war rooms” for collaboration.

Pair Design (Why Christopher Noessel on Interaction 14)
Christopher Noessel from Cooper Consulting on twin design.



Methodologies, procedures, standards


Accessible Rich Internet Applications (WAI-ARIA) 1.0
WAI-ARIA 1.0 is released - a guide to the availability of interactive Internet applications. Announcement . Continuing the theme:

What is Service Design?
Introduction to the design of services in 3 minutes.



Cases


Facebook's New “Creative Labs” Lets The 6,000-Employee Giant Move Fast Like A Startup
The story of Facebook Creative Labs — the internal team of the social network that was responsible for the Paper release. Companies of this scale are difficult to implement radical or even bold solutions to the interface - there will always be a group of dissatisfied users, which, with hundreds of millions of users, will always be impressive. At the same time, small third-party applications that Facebook plans to launch actively this year do not oblige to anything - this is an experiment that should not earn and protect the habits of existing users. Continuing the theme:

Lenta Inside - Galina Timchenko's workshop at the School of New Media
A master class by Galina Timchenko, former editor-in-chief of Lenta.ru, about how the recent redesign of the publication was done and what problems it encountered in its course.



DigitalGov User Experience Program - Before and After Gallery
Gallery of US government web services before and after usability testing.

A selection of cases

Automating Layouts Bringing Flipboard's Magazine Style To Web And Windows
Charles Ying from the Flipboard team talks about their new Duplo engine for automated magazine layout of the materials themselves. It contains a collection of 2000 standard modules from which the service builds a spectacular material. We, by the way, worked on a similar system. Continuing the theme:


Whatever goes up, that's what we do
An interesting discussion about the recent redesign of Facebook. First, Dustin Curtis wrote that sometimes user experiences are deliberately sacrificed for the sake of metrics. So what is next:

UX Review of Official 2014 Sochi Olympic Website
Craig Tomlin gives an expert assessment of the site of the Sochi Olympics. In general, positive.

Augmedix
Cooper and Augmedix have jointly designed the Google Glass app for doctors. More about the project .

How Medium Took Calculated Design Risks - And Won
Interview with Dann Petty, creator of Medium's original design.

Story


Technology Legend: Honoring Douglas Engelbart
A two-hour film in memory of Douglas Engelbart, the most important person in the history of interfaces and the practical use of computers for mass tasks, in a simple, user-friendly way.



Towards a New Information Architecture
Christina Wodtke wrote a wonderful article on the 15-year history of information architecture. About how it all began, why it turned out the way it happened and what will happen next. Continuing the theme:

Why Your Mouse Cursor Looks
Bart Gijssens found the history of the cursor icon for Stack Exchange - why it is tilted, not vertical. The problem, as usual, is in technical limitations - this is described in the original document of the PARC research laboratory (PDF). Original discussion .

Who Made That Progress Bar?
A note from the NY Times about how Bob Stahl proposed the concept of a progress bar in 1986.

Trends


From Paths to Sandboxes (Presentation by Stephen P. Anderson)
Presentation by Stephen P. Anderson, devoted to an alternative view on the design of services. He proposes to abandon the job of optimizing specific scenarios and create a platform with simple rules of work that users could use as it suits them better. Such services have much greater involvement and flexibility - almost like game worlds.

The presentation at http://www.slideshare.net/stephenpa/from-paths-to-sandboxes is not available.


Interaction Design Association Awards
After the completion of the conference Interaction14, held February 5-8 in Amsterdam, the Interaction Design Awards were awarded. Already available videos of some reports, as well as videos of projects - candidates for awards. All finalists and winners . By the way, the absolute winner was the story of an emotional toaster named Brad .

Mobile Book of Trends 2014
E-book from Marcin Treder and Movade, dismantling trends in mobile interfaces with an impressive collection of examples. Our email application for My.com, by the way, also got there (page 70). Continuing the theme:

'Soft Electronics' Makes Wearable Computing Something You'd Actually Wear
Google Glass 2013 was the trend of 2013. The new trend of 2014 is soft, wearable electronics, adding interactive elements to clothes and fashion accessories. Continuing the theme:

The future of content editors
Paul Boag about the new generation of content editing tools (CMS): Mailchimp email designer, Medium, Squarespace. Users are given more freedom in choosing the layout structure, but freedom remains limited.

Jonathan Follett - Designing for Emerging Technologies
This year, Jonathan Follett's book Designing for Emerging Technologies will be released on how scientific breakthroughs and new technological horizons will impact the UX. Robotics, biology and genomic research, Internet of things, etc. Excerpts from it:

How interface designers save movies from old age
A good overview of cinema interface design from Look at Me.

Challenging Data Driven Design (Speech by PJ McCormick at WarmGun 2013)
PJ McCormick, Amazon UX Lead on the modern approach to Data Driven Design. The data should help designers in making decisions. That is, to help, and not to make decisions for them. We need a healthy balance between total optimization, as it was on Amazon 10 years ago, and between decision-making outside the context of “design dribbling”. An analysis of a few simple mistakes that can be made by an inexperienced specialist. Continuing the theme:




Siri, Cortana, And Our Smartphone Assistants Have Such Weird Names
Siri, Cortana, Maluumba, Google Now ... It’s not so easy to choose the right name and personality for a voice assistant.

Professional Development


Grocery designer. Modern understanding of the profession
Design Weekend , 2014. , , . — , , . Continuing the theme:



Why so much “science” used in design is bullshit
MJ Parnell Android UX. «» «» . - . . :

Bret Victor's Links 2013
Bret Victor compiled a collection of strong scientific publications and articles he read last year. They are quite hardcore, in most cases concerning mental and conceptual models, perceptions. But they will be very useful for pumping the theoretical base.

First Principles of Interaction Design (Revised & Expanded)
Bruce 'Tog' Tognazzini has prepared an extended version of its "Fundamental Principles of Interaction Design." This is a very, very cool semi-book for those who want to pump in the UX.

Daily UX Crash Course
31-day course, Daily UX Crash Course. The first part .

A Conversation With Designer
In the middle of last year, Dieter Rams spoke to the students of Art Center College of Design with an interesting lecture on the design profession. Andrew Kim, known for his strong concepts, was on it and wrote down several key points .



Tales from the trenches: Lessons learned from Netscape, Yahoo !, and Google
Irene Au's very interesting personal experience - about 18 years of his UX career in Netscape, Yahoo! and google. She opened the Information Architecture Summit 2014 conference with a story.

State of Design - How to Design a Must Change
Don Norman on how to change design training. You need a balance of analytical and visual training. From the training of narrow specialists to proceed to the preparation of universal professionals. Also be interesting:

Aquent gymnasium
Free Aquent video courses that already have two programs on the topic - Coding for Designers and Responsive Web Design, and a basic UX program will be added soon.

How To Kill It During A UX Interview
Patrick Neeman shares tactics of successful behavior of a UX-specialist at an interview for a job admission. Continuing the theme:

It's A Great Time To Be A Designer (Jared Spool Presentation)
A fresh presentation from Jered Spool about design strategies, innovations and imitations, that now is a great time to be a UX designer.

The presentation at http://www.slideshare.net/jmspool/its-a-great-time-to-be-a-designer-r34-1-up is not available.


Dedesign the Web
Test from Dedesign the Web. Try to guess known sites by wireframes.

Apple Designer Jonathan Ive Gives Rare, Remarkable Interview
Interview Jony Ive magazine Time.

Women Talk Design
Female look at the UX. Profiles and collection of speeches of the most famous women in the industry. Continuing the theme:

User Experience Design for Developers
UX-design for developers from the Android team. Laura Klein talks about Lean UX.

What is it?
Why is it so hard to find a good UX specialist? First, there are a lot of really good and experienced UX-professionals. But most importantly, many companies simply do not know how to prepare them. Who and how to look, what to look for. Even if you find talented professionals, is the internal corporate structure ready to make UX work in full force? Continuing the theme:

CoDesign Bracket Madness - Who’s the World’s Greatest Living Designer?
Co.Design is voting with the elimination of the greatest designer of our time. The second round is over and the third is about to begin.

Conference proceedings


Conference Review: UXStrat 2013
Overview of the main presentations of the UXStrat 2013 UX-strategy conference with videos and presentations.

Experience Innovation. DMI: Design Leadership Conference
Conference materials dmi: Design Leadership Conference, held November 5-6, 2013 in Boston. Don Norman's inspired performance, as well as Dan Saffer, Nathan Shedroff, Karin Bodine.

Fresh links can also be tracked in the Facebook group of the same name. Thanks to everyone who also publishes links in it, especially Gennady Dragun.

Source: https://habr.com/ru/post/218445/


All Articles