Aaron Gustafson, web standards advocate at Microsoft and author of Adaptive Web Design, will open Generate San Francisco on 9 June. The conference will also feature Rachel Nabors, Stephanie Rewis, Steve Souders, Josh Brewer and nine other great speakers covering prototyping, animations, performance, design systems, artificial intelligence, and much more. Get your ticket today!
How are our interfaces changing and adapting? The interfaces and means we use to access content and services provided on the web have expanded greatly as we have imbued more and more devices with connectivity. When I started out on the web, screens were small – 800×600 was considered large – connections were slow, and folks were either accessing the web via a terminal interface like Gopher or Lynx or they were using a very early graphical browser on their desktop. Most screens only supported about 256 colours and interaction was only possible via keyboard and mouse and generally required round-trips to the server (or refreshes of a frame within the web page).
Things have obviously changed a lot since then in terms of how we interact with the web. We’ve still got mice and keyboards, but computers can also respond to our touch, gestures, our voices, and other physical implements like dials and pens. Some computers have tiny screens, some have giant ones, others have no screens at all. Over the years, the practice of designing for the web has generally followed a consistent path of taking advantage of more and more screen real estate, but with the advent of mobile, many of us shifted our focus to enabling users to accomplish core tasks like reading an article or purchasing a product.
Media queries and design approaches like responsive web design have allowed us to adjust our layout and designs to provide experiences that were more tailored to the amount of screen real estate (and its orientation), but we’ve only begun to scratch the surface when it comes to how we adapt our interfaces beyond visual design.
What’s the first step to creating a great adaptive interface? Planning is absolutely the best first step. Think about each component part of your interface and brainstorm the different ways it may need to be experienced. Iterate on that. Ask tough questions.
Consider the performance implications of your choices. Can you provide a default state that is streamlined and lightweight? When might it make sense to incorporate richer imagery and the like? Are there alternative ways you can approach that enrichment?
Taking the time to ask questions and plan out the experience ahead of time – even in broad strokes – will pay dividends when it come to copywriting, design, development, and testing.
What are some recurring mistakes you see in regards to interfaces and how can we avoid them? One of the issues I see time and time again in web projects is improper use of semantics. Whether this comes from a lack of understanding of the purpose each element in HTML serves or a lack of concern for the implications of poor element choices, it’s a problem.
As a simple example, consider a form. Users need to submit that form. I’ve seen developers use button, input, a, and even div elements to provide a clickable button. But these choices are not equal. An input or button element, when given a type of submit, can provide this functionality easily.
The elements we choose matter.
What can people expect to take away from your talk at Generate San Francisco? My hope is that folks who see my talk will have their perspective broadened, if only a little bit. I want them to become more aware of the ways in which real people use the products we create. Folks who can only afford older or lower-end hardware, folks without constant network connectivity, folks who rely on keyboard commands or their voice or their eyes to browse and interact with the web.
When you become aware of the myriad ways people can and will access the web, your work naturally becomes more inclusive. And that’s my goal: increasing the inclusiveness of the web.
Generate San Francisco will give you exclusive insights into design and development at Netflix, Uber, Airbnb, Twitter, Salesforce, Huge and more. If you can’t make it to SF, there’s also a Generate conference in London in September, which will feature workshops and talks about design and content sprints, responsive CSS components, UX strategy, conversational interfaces, accessibility and tons more.
Let’s face it, the more attractive your app icon is, the more downloads your app will get. Both the iOS and Android app stores are visually competitive and app creators need to know what makes an awesome icon that grabs the target audience. While it seem like a small detail, there are many ways to…
There’s just over a month to go until Generate San Francisco hits the Broadway Studios on 9 June. It’s going to be an unmissable day of practical and inspiring talks that will cover web animations, prototyping, performance, design systems, artificial intelligence and much more. If you haven’t booked your ticket yet, here are 10 reasons why you really shouldn’t miss it.
01. 14 great sessions
Generate returns to San Francisco with almost twice as many speakers as last year! Just like its New York counterpart, it’s a one-day, two-track conference, which means you can choose the talks that pique your interest or suit your needs. But fear not, you don’t need to miss out on any talks at all because you’ll also get…
02. Conference videos and slide decks
Videos and slide decks of all the sessions will be made available to attendees after the event, so you can dig deeper and catch up on any talks you missed. You can then even share them with the rest of your team. In fact, we positively encourage it!
03. Hear from the world’s leading companies
At Generate San Francisco you’ll get exclusive insights into how web and product design and development is approached at some of the world’s leading companies, including Airbnb, Twitter, Microsoft, Uber and Salesforce.
You’ll learn how Netflix builds prototypes and conducts field research, how Salesforce has built a modern CSS framework for a living design system, how Uber designs for driver delight, how RED Interactive creates experiences that are truly customer-centric, and much more.
You’ll even hear about NASA‘s design and user research insights from iterating prototypes on operational tests that you can apply to your own products.
04. A fantastic line-up of speakers…
Generate features 14 unique speakers from all kinds of backgrounds, and each of them has a unique area of expertise that they will be sharing.
The line-up includes web animation expert Rachel Nabors, performance guru Steve Souders, veteran frontend developer and standards pioneer Stephanie Rewis, and many more. Keynotes will be delivered by , who will explore adaptive interfaces, and , who is redesigning the design process with revolutionary new tool .
You’ll also learn from Julia Khusainova, now an experience designer at Airbnb, who will walk us through her process for developing new products from ideation, testing and validation, development, to release and beyond – achieving business goals without compromising the user experience.
05. …and workshops too!
You can still learn new things between the sessions! Our partners will be hosting mini-workshops in the breaks, so you can learn even more.
06. Get ahead of the competition
Web technologies move so fast that it can be difficult to stay on top of new developments. Come to Generate San Francisco, though, and you’ll emerge with an understanding of cutting-edge techniques that you can put to work as soon as you return to the office, and you’ll have a feel for where the web is going and how you can be prepared for it.
07. Don’t go hungry
Nothing builds an appetite like filling your brain with tips and advice on supercharging your web skills, so as well as providing free tea, coffee and snacks during the breaks, we’ve organised food trucks so you can buy some lunch and head straight for a workshop.
08. Build your professional network
As well as a top line-up of speakers, Generate also offers a great opportunity to forge new contacts. Whether it’s during one of the workshops or session breaks, or later on at the after party, it’s the perfect chance to meet other web professionals and expand your personal network.
09. Free beer and games
That’s right, there’s going to be an after party. It kicks off straight after the conference finishes, in the Peace room at the Hotel Zeppelin , where you’ll be able to enjoy some free drinks on us.
Come along, grab a beer, chat with the speakers and fellow attendees, and get some last-minute networking in.
10. Save 50% on your ticket!
We will be running a 24-hour flash sale starting at midnight PST on Thursday, 27 April, which means you’ll be able to save 50% on your ticket and just pay $187.50!
Have we convinced you? Find out more about Generate San Francisco, or simply buy your ticket today!
If you can’t make it to San Francisco, there’s also Generate London on 20-22 September. Tickets are on sale now.
Chatbots are being discussed at all Generate conferences this year. In New York on Friday CapitalOne’s Mindy Gold will talk about what it means to design for conversation, while in San Francisco on 9 June Huge’s Sophie Kleber will explore how to design emotionally intelligent machines. Finally, at Generate London in September Giles Colborne will analyse opportunities as well as pitfalls of conversational interfaces. Get your tickets today.
In the mid-2000s virtual agents and customer service chatbots received a lot of adulation, even though they were not very conversational, and under the hood they were merely composed of data exchanges with web servers. Almost a decade later, chatbots are the latest form of artificial intelligence to cause a stir in the tech scene. Even though a huge number of examples of this ‘weak AI’ exist (including Siri, web search engines, automated translators and facial recognition), with major investment from big companies, there remain plenty of opportunities to hack the future.
As well as being trendy, chatbots can actually be very useful. They don’t need to feel like a basic replacement for a standard web form, where the user fills in input fields and waits for validation – they can provide a conversational experience. Essentially we’re enhancing the UX to feel more natural, like conversing with an expert or a friend, instead of web browser point-and-clicks or mobile gestures. The aim is that by providing empathetic, contextual responses, this technology will become embedded directly in people’s lives.
What follows is a very practical way to design and build a chatbot, based on a real project-intake application in a service design practice. As this practice serves over 110,000 members globally, the goal was to provide a quick, convenient and natural interface through which internal stakeholders could request effective digital services.
We designed the project intake application so that anyone can make a project request with simple text queries, instead of having to fill out confusing forms in the company’s web-based task management software. The chatbot became the initial client- facing approach, which enabled the team to focus on business goals like lowering operating costs and increasing efficiencies.
Personality and UI
The first step was to establish the chatbot’s personality, as this would represent the voice of the service design team to its stakeholders. We built on Aarron Walter’s seminal work on design personas. This greatly helped our team develop the bot’s personality traits, which then determined the messages for greetings, errors and user feedback.
This is a delicate stage, as it affects how the organisation is perceived. To make sure we had as much information as possible, we immediately set up stakeholder workshops to nail the appropriate personality, colour, typography, imagery and user’s flow when engaging with the bot.
After we had gained all the necessary approvals – including seeking legal counsel – we set out to convert archaic request forms into a series of back- and-forth questions that mimicked a conversation between the stakeholders and a representative of our design services team.
We knew we didn’t want to get too deep into AI markup language for the processing part – we just needed enough to jump- start the experience. RiveScript is a simple chatbot API that is easy enough to learn and sufficed for our needs. Within a few days we had the logic down to intake a project request from the bot, and parse it with enough business logic to validate and categorise it so it could be sent it through JSON REST services to the appropriate internal project tasking queue.
To get this basic chatbot working, head to the RiveScript repo, clone it and install all the standard Node dependencies. Note: In the repo you can also gain a taste of the interactions you can add with the various example snippets. Next, run the web-client folder, which turns the bot into a web page by running a basic Grunt server. At this point we can enhance the experience to suit our needs.
The next step is to generate the ‘brain’ of our bot. This is specified in files with the .RIVE extension, and thankfully RiveScript already comes with basic interactions out of the box (for example, questions such as ‘What is your name?’, ‘How old are you?’ and ‘What is your favourite colour?’). When you initiate the web-client app using the proper Node command, the HTML file is instructed to load these .RIVE files.
Next we need to generate the part of our chatbot’s brain that will deal with project requests. Our main goal is to convert a selection of project tasking intake questions into a regular conversation.
So, for example:
Hello, how can we help?
Great, how soon do we need to start? Can you give me a rough idea of your budget?
Tell me more about your project …
How did you hear about us?
A typical accessible web form would look like this:
With web forms we’re very familiar with certain patterns: you click the ‘Submit’ button, all form data is sent to another page where the request is processed, and then most likely a cheeky ‘Thank you’ page pops up. With chatbots, we’re able to take the interaction of submitting a request, and make it more meaningful.
Designing a voice
To convert this form to a conversational user interface served in RiveScript’s chatbot web client, we need to convert the information architecture from rigid to fluid; or field labels into UI strings. Let’s consider some accessible field labels, and their related question tone:
Request: How can we help? Not sure? Do you mind if I ask a few questions?
Timeline: How soon do we need to get started?
Budget information: Can you give me a rough idea of your budget?
Project description: OK, can you tell me a summary of the problem to be solved?
Reference: Also, who referred you to us?
Next we need to convert the web form’s code into AI script, following RiveScript’s very learnable processing logic for two-way conversations:
As opposed to standard form variables being sent to another page or service to process, chatbots can validate and submit information entered by the user in a chat window (or spoken) immediately, which means users can also revisit previously entered values easily. We needed to send the user’s request entered in the chatbot UI via the JSON REST API to an external project tasking server.
In RiveScript-js we are free to make use of an XMLHttpRequest object to submit the request almost simultaneously, as the data is entered by the user:
Soon, current ways of interacting with computers to obtain information will give in to AI-based technology like chatbots, where people just make simple voice commands or text queries. The web design community need not fear – we should all be embracing the added value of this new technology. It could be a game-changer for the companies it works for, offering fully scalable customer service and improved customer intelligence.
This article was originally featured innet magazineissue 290;buy it here.
If you want to find out more about designing chatbots, don’t miss Generate this year. The San Francisco conference on 9 June also features presentations from speakers at Netflix, Airbnb, Uber, NASA, Twitter, Microsoft and more.
Generate London, meanwhile, is preceded by a day of workshops covering design and content sprints, user experience strategy, building scalable responsive components, and how to sell your idea to stakeholders.
How to design a chatbot experience
5 essential chatbot learning resources
How conversational interfaces are innovating banking
When it comes to setting your business up for success, there’s a lot you can do to stack the deck in your favor. You can get clear on your branding, develop a solid marketing strategy, rewrite your copy over and over until it converts like crazy… You get the idea. But there’s one subtle magic trick…
In the past, web designers put a particular focus on showing off their skills and design portfolios by packing sites with flashy illustrations and animations that supposedly wowed their visitors. Then came a shift toward skeuomorphic design, which attempted to bring real life to the screen, with faux-realistic textures, drop-shadows and real object characteristics.
That gave way to flat design, which opposed all of these ‘artificial’ design techniques in favour of a more simplified, classically digital aesthetic. And while this user-centric web design style has been around for many years now, is still as relevant and popular as ever. So if you’re still not sure what it’s all about this guide might be just what you need…
What is flat design?
Flat design is a minimalistic design approach that emphasises usability. It features clean, open space, crisp edges, bright colours and two-dimensional illustrations.
Microsoft was one of the first to apply this design style to its interface, seen by some as a backlash against the popular skeuomorphic design that Apple kicked off with its iOS interface. Instead of converting a real-life object, such as a calendar, into a tiny realistic illustration, advocates of flat design identify apps with simple, icon-like images.
Rather than bringing aspects of real life to an interface, this illustrates a clear separation between technology and tactile objects.
Minimalist doesn’t mean boring
In flat design, ornamental elements are viewed as unnecessary clutter. If an aspect serves no functional purpose, it’s a distraction from user experience. This is the reason for the minimalistic nature of flat design.
However, just because it lacks any flashy design doesn’t mean this style is boring. Bright, contrasting colours make illustrations and buttons pop from backgrounds, easily grab attention, and guide the user’s eye. The purpose of minimalistic imagery also contributes to flat design’s functional character.
Quick to grasp
Simple images convey messages more quickly than detailed illustrations. Images like icons can indicate universal actions or purposes so that everyone can easily understand them.
It’s easy to see an immediate difference between a skeuomorphic and a flat design. Notice how the bigger, solid colour blocks are more attention-grabbing and the meaning of the icons can quickly be perceived.
This cloud computing guide (above) from online accounting service Xero uses a combination of flat illustration and iconography to demonstrate different benefits of working with the cloud. The simplicity of the imagery makes it easy to understand the message, which takes away any need for excessive copy.
What you can learn from it
Flat design reverts back to the basics of design as a functional tool. A website is designed and judged by how well it works, as opposed to what it looks like.
This raw functionality forces a site’s focus to be on user experience, so websites that employ this design style successfully are likely to receive positive feedback as being user-friendly.
How to do it
To design an effective flat site, all design elements must be centred on this idea of simplicity.
Solid, vivid colours give aspects the emphasis needed to set them apart in place of illustrative detail; sans-serif typography provides a clean, crisp supplement to illustrations; text is concise and to-the-point; UI elements like buttons and links are clear and noticeable.
Everything should be designed with the same goal in mind to create a cohesive visual and functional web design. Below are some great examples of flat design…
This trip planning app design by Indonesian user interface designer Bady makes it extremely easy to book a flight based on packages and budgets. Everything is clear and understandable, and the design relies mostly on colours and icons to give meaning. The copy is concise, and the UI aspect of searching for an ideal flight is obvious.
This weather app UI design shows that flat design can be successful even without the use of bright colour. The crisp iconography and large typography draw attention to the most important aspects of the weather, which is what the user is looking for.
When exploring flat design in your work, make sure to design every aspect with a minimalistic and user-centric perspective to ensure a unified interface. Once you’ve successfully done this, your users will appreciate the functional nature of your website.
This is an updated version of an article that previously appeared on Creative Bloq. Add your views on flat design in the comments below…
Get the best free vector art for your projects
What does an art director actually do?
Check out this collection of top Photoshop tutorials
One of the most effective ways to learn about something is to get stuck in practically. That’s certainly the thinking behind How To Draw Type and Influence People, the latest book by Type Tasting founder Sarah Hyndman.
Published by Lawrence King, this fun and informative book encourages readers to experiment with typefaces to gain a greater understanding into how they affect our everyday lives.
10 new free fonts for 2017
Just think about it: typography is everywhere and it evokes an emotional response even before you’ve read the words. You’ve probably encountered a range of typefaces before you even landed on this article, and each one is designed to achieve a specific goal.
As part of her mission to make typography fun and engaging for everybody, Hyndman’s book is an accessible read that both general readers and seasoned graphic designers can enjoy.
Taking readers on a whistle-stop tour of typography terms, the book covers the basics of families, serifs, letterforms and more. You’ll even learn the difference between fonts and typefaces, so you’ll earn a place in the good books of your more pedantic design friends.
Backed up with a visual type glossary, the activity book is an invaluable resource for those who want to learn about typefaces and even create their own.
And getting creative is at the heart of How to Draw Type and Influence People. Each chapter is filled with exercises that invite you to pick up a pen or pencil and have a go at designing your own typeface. Throughout the course of the book, readers will have a go at creating typefaces to communicate a tone of voice, a sense of rebellion, and even a smell.
Running at 128 pages, this beautifully illustrated landscape book is almost too stylish to vandalise with your own haphazard scribblings. But if you want to get the most out of it, you’re going to have to take the plunge.
Topped off with a further reading list of useful books and websites (including the one you’re on now – blush), How to Draw Type and Influence People could well be the most fun way to take a step into the world of typography. If this sounds like the book for you, Hyndman is launching it tonight at the Tate Modern Terrace Bookshop from 6pm, or you can buy it here.
At Generate New York on 28 April, Pamela Pavliscak will give a talk, grounded in the latest research, that will look at current examples of emotion AI and present guidelines to design for emotional intelligence. Don’t miss it and get your ticket today!
The statistics say that there are more people who own smartphones than use a toothbrush, most people are using their tablets while watching TV, and many are showrooming while shopping in a store. A lot of what we know about people and their mobile devices comes from high-level data, but these stats tell us very little about what people actually do on mobile sites and apps.
Analytics capture behaviour, but stay on the surface. Surveys get at some of the feelings people take away from a site after using it. The only way to gain insights to make the experience better is by doing slow work of watching it unfold and asking the right questions.
Like a lot of consulting firms, Change Sciences leads research on mobile sites and apps all the time in the lab, online and in the wild. These studies tend to be small: usually about 20 people per study. We also run larger online studies that are observational at the core, and these studies tap about 100 people. To get more (and better) data about the mobile user’s experience, we have to aggregate. That is, we bring together all of the data from all of our mobile studies to look for patterns and trends. The data here represents 500 people.
Here are top 10 things we’ve learned about the mobile experience; bear them in mind if you want to know how to create an app that’ll get people’s attention.
01. People rely on mostly three gestures
People use three gestures for almost everything; they don’t want to spend a lot of time trying out new ways of interacting. They just use what works on other sites or apps.
Scroll: The most frequently used gesture is scrolling. 94 per cent of people use this gesture more than three times in a session of 10 minutes or longer. It is familiar from desktop use. And it is a gesture that is not closely tied to a visual cue, like tap or swipe.
Swipe: Swipe (77 per cent) is well used and understood. People will try it at the top of a screen, whether arrows are present or not. Further down, they are less likely to do it unless there is a visual cue.
Tap: Tap (72 per cent) is used often too, but people are not tap-happy. On desktop, we see people click and click trying to make a link or button go. On mobile, that is not the case. Tap is not equivalent to a click.
Pinch to zoom: People know how to pinch to zoom, but use it less frequently. Because people mostly need to zoom on mobile sites that aren’t responsive or mobile optimised, they will often look for a link to a bigger (mobile-optimised) version of the site. If it involves zooming in and moving the screen from left to right, people will try another way about 70 per cent of the time.
Omit needless gestures. Rely on the big three listed here, and make all other gestures secondary. Try animated cues, but keep them minimal because animation is often ignored.
02. People will go to great lengths to avoid typing
We hear a few complaints about fat fingers, and many more about how other apps make it easier, or how annoying it is that a company would require so much information. People don’t blame themselves; they blame the site or app.
Social login: Most people will try workarounds. While roughly half of the people who participate in our research say they don’t like – or want – to make use of social login for various reasons, close to 80 per cent will do it just to avoid the extra typing.
Cut and Paste: Very few people try to cut and paste: it is more awkward to do so than to type. Even when people try to, their success rate is low and frustration is high.
Portrait modes: People don’t make it easy on themselves when it comes to typing: 90 per cent don’t use landscape mode, making it just that much harder to type.
Strive for typing zero. Or, any shortcut is a good shortcut. Remember usernames and passwords, personal information like addresses or phone numbers, and previous interactions that required typing. Pre-filling with typical responses can help. Most importantly, really consider the necessity of each data entry field.
Mobile wallet is likely to succeed in no small part because it minimises typing. And people long for a day when they don’t have to remember so many passwords.
03. Icons are mostly confusing
Very few icons are crystal clear. There are simply too many for people to keep track of – and to make matters worse, they are not always used consistently from site to site, or app to app.
The clear: Among the best-understood icons are the triangle for play (92 per cent) and the X for close (90 per cent). Most people don’t have to think about these icons for two reasons: they see them on every site they use and they are used consistently to indicate only one thing. Even if placement or visual treatment varies slightly, people still understand it.
The unclear: Compare this with the search icon (80 per cent). Most people interpret the magnifying glass as search, but some are still not sure – depending on the context, it could also mean zoom. Other icons score even lower for clarity, however. Favourite (63 per cent) is indicated by a heart or star, but this could equally mean either Like or Save. Settings (57 per cent) and locate (35 per cent) are other icons that we’ve been tracking. These are not well understood because they don’t appear as frequently, are not used as often, and are not always used consistently across sites or apps.
The hamburger: The hamburger menu is still not well understood. When we tested sites or apps that used the hamburger a year ago, the reaction was something like: “I’ve been noticing that doodad on sites, but thought it might just be part of the design.” Over the past year we have seen hamburger awareness rising, but people may only stumble upon the menu accidentally or after using the site or app for a significant period of time.
Make sure you use icons in a way that’s consistent with other top sites and apps, especially ones familiar to your users. A/B test treatment, placement, and words that appear with icons. Track everything you test over time, because behaviours are bound to change.
04. People have an aversion to bottom navigation
This finding, at first glance, seems to run counter to the current best practice of putting navigation at the bottom for one-handed use. Whether people have an easier time using it with one hand or not, they don’t think to look at the bottom or, more often, just choose to ignore it. “I know that there are options on the bottom, but if I have to look there it is too late.” It is the navigation of last resort.
For now, essential options should be either on the main screen or in the navigation at the top of the page.
05. Sound is the unsung hero
78 per cent of people who participate in our in-person studies leave their ringer on and their sound turned up. It may be surprising that sounds elicit a lot of positive comments.
Confirmation: People like the closure they get when they hear a message being sent, or an action is finalised, like moving a file to a directory or money from one account to another.
Delight: People give apps one try, so a clever message or a fun sound can tip conversion. Part of the reason people like to pull to refresh is the resulting sound.
Sounds cues are a missed opportunity. Few sites or apps are using them effectively.
06. We’re not very good at multitasking
Of course, research shows that we don’t really multitask at all. We switch from one thing to the next. On mobile, this is even more pronounced.
Time out: People get distracted very easily, with notifications taking priority over all else: “If I leave to look at a notification, odds are I will never make it back.” Remembering may be overrated. More often than not, people just move on and don’t pick up where they left off.
Focus on making each screen a self-contained unit. Timing out after two to five minutes is a good rule of thumb and certainly something to test.
07. The lack of back
On desktop, people rely heavily on the back button. This behaviour carries over to mobile, but is not supported nearly as well. So people try workarounds to back up.
Home button: 78 per cent use the home button to start over in an app or on a site. People do it despite its futility.
Arrows: Only 45 per cent use the arrow at the bottom in the mobile web browser. This may be part of bottom navigation aversion.
People love the convenience of going back, rather than having to learn how to navigate a site or app. At minimum there has to be a way to go home. For now, the hamburger menu may not suffice. An arrow that is always visible, or a button at the top, are viable options to test.
08. Multi-screen is backwards
Mobile is still considered as the second screen, with bigger screens assumed to be people’s main focus. Our research shows that the opposite is true.
Mobile-first: In our research, attention is focused on the screen in the hand 60 per cent of the time and not the one further away, whether that’s desktop or TV. There are just a few exceptions to this; for instance, using mobile at work as a second, unrestricted screen.
Thinking of mobile as the foreground and not the background is a new way of seeing the experience. It makes a strong case for not stripping away content or features.
09. People appreciate a little magic
Clearly, people expect their phones to know everything about them – store all their personal information, know their location and recognise their voice. As a result of people focusing on the results, rather than the nuts and bolts of how their devices work, mobile can seem magical.
Camera: People are still surprised by things that seem impossible, like scanning a cheque using the phone’s camera. “How can this even work? I’ve got to tell my friends about this.”
Geolocation: Location awareness is another feature that often produces a feeling of wonder. It is a tricky balancing act to keep it from seeming a little too all-knowing though.
Accelerometer: Apps that track movement, or the lack of it, are losing their aura of magic. People are more focused on the data that results from use, and on comparing or sharing, than on how it was tracked.
That one unexpected surprise is what often converts. Apps can leverage more of a phone’s capabilities, but unexpected moments on a mobile site can convert, too.
10. People expect mobile to be better than desktop
“Mobile is better – less hype, less ads, less junk to get in the way.” Expectations for the mobile experience are high and defection is commonplace. Around 40 per cent of users will opt for a different website if the one they’re visiting is not mobile friendly, and 57 per cent won’t recommend a poorly designed mobile site.
Make the experience about that one special thing. This needn’t mean a pared-back experience, but a tightly focused one.
Mobile is not merely about more screens – mobile is a set of behaviours. And the patterns of those behaviours are constantly in motion.
The things people do today are not necessarily the same ones they will be doing next month or next year. The only way to really understand how people interact with mobile – and how they feel about it – is to continue to observe and track.
This article originally appeared in net magazine issue 255 (July 2014).
Pamela Pavliscak will discuss emotion-sensing technology and what it means for how we design at Generate New York next week. If you can’t make it to New York, there’s also a Generate in San Francisco on 9 June, featuring a talk by Huge’s Sophie Kleber, who will evaluate current examples of emotional computing, and introduce frameworks that can help us design for emotional intelligence.
This month our packaging pros delivered big time. From one-of-a-kind brews and blazing hot sauce to kinesiology tape and even a pilates ring, our design community created stand-out packaging and label designs for some seriously awesome products. Check out our top contenders and vote for your favorite below! 1. Barrel Aged “Self Deprecation” Strange Ale…
Rachel Nabors will give a talk about the web in motion at Generate San Francisco on 9 June, which will also feature presentation by Steve Souders, Stephanie Rewis, Aaron Gustafson, Josh Brewer and 9 other great speakers. Get your ticket today.
These days, we’re all used to seeing show-stopping animated and 3D movies. Technology has come a long way in recent decades, but, to this day, some parts of animation production remains unchanged.
Let’s go back to the first time anyone had attempted to create a feature-length animated film. The cosy team dynamics that worked so well for creating Mickey Mouse shorts would not scale for Snow White and the Seven Dwarfs. The Walt Disney Studios needed a way to coordinate many teams in order to tackle the massive undertaking.
It was a simple idea: dissect the story into its component scenes, illustrate them roughly on paper or cards, pin those cards on large cork boards, then distribute those boards to the teams every morning. The story department could steer the project, and the production artists would never be able to wander too far down any dead ends.
Storyboards brought what we now call agile development to studio animation. Since Snow White, they’ve become a production staple of film, interaction design and game design. Now, with animation entering the toolsets of web designers and developers everywhere, it seems that storyboards might become this industry’s new best friend, too.
Storyboards for the web
When it comes to animating user interfaces on a project, communication between designers and developers tends to break down if they aren’t working side by side. In companies where animation deliverables are ‘thrown over the fence’ to developers, sometimes designs are handed down as animated GIFs or videos with little else to guide the developers when recreating them.
Storyboards can help designers and developers communicate this very visual topic using its lowest common denominators: words and pictures. They require very little training to make and read, and you can create and edit them without the need for specialised software.
Storyboards are great for sketching out quick UI animation ideas during a team meeting and gathering immediate feedback. For rapid prototyping teams, wireframes can be a great way to document the patterns used, so successful patterns can be applied consistently as the project continues. And as design artefacts, they fit perfectly with style guides and design systems for documenting reusable animation patterns.
A perfect match
On their own, wireframes can help break down communication barriers between developers and designers by giving them a common, collaborative medium. But they are even more powerful when coupled with video and prototypes.
Often motion designers create and polish animations in a program that’s not designed for web development, like After Effects or Keynote. Indeed, it makes sense to experiment with animations using visual tools. But alone, video is a poor deliverable for developers. A developer might spend hours trying to recreate a subtle bounce effect that could have taken seconds if they had only known the easing value used by the designer in their animation program.
Delivering storyboards alongside videos lets developers know exactly what steps to follow to recreate an animation. This is less intimidating than having to make many inferences (which might also frustrate their coworkers). The difference between a cubic and quintic curve is nigh-on impossible for a harried developer to spot in a 500 millisecond GIF. But for a sharp-eyed designer, the difference in production is glaring.
The storyboarding process
Modern storyboards at the office are quite a bit smaller than the large corkboards of the 1930s; they look more like a comic book page than a billboard. Just like a comic page, each panel illustrates and details a different snapshot in time. Underneath each panel is text detailing what’s happening, how and why.
In web design, each of those panels could contain a screenshot, a wireframe, even a sketched microinteraction, supported by notes expanding on what interactions trigger the animations, and over what period of time they occur.
Storyboards can be as macro or as micro, as polished or as rough, as you please. Do what makes sense for you and your team. I have created storyboards with index cards, Photoshop, and even Keynote. It’s important to pick tools that everyone on your team can use and read. Often that ends up being pencils and paper!
For UI animation, storyboarding should start alongside wireframing; right after user research and information architecture. If your workflow is more vigorous, you might start storyboarding alongside design. As long as you’re thinking about animation early, you will be in good shape.
Code your colours
In addition to the black and grey of wireframing, storyboarding benefits from reserving two special colours to indicate action and animation. I use blue and orange respectively, partly because they are discernible for people with various kinds of colour blindness. Blue subconsciously registers as an actionable ‘link’ colour, and orange is very active and stands out. Use these colours to indicate what user interactions cause which things to animate.
Get those digits
A picture is worth a thousand words, but in animation the right numbers can be worth even more. Be sure to include the duration of each part of the animation. Even adverbs like ‘quickly’ or ‘slowly’ will help paint a mental picture for those that need to implement the animations.
Spell out what properties are being changed: from colour and opacity to width or height. Use descriptive words like fade, shrink, slide, expand. Phrases like pop, bounce and swoosh have more subjective values, often affecting more than one property. Does a ‘pop’ involve expansion and contraction as well as a rise and fall? Save these words for naming your animation patterns once they emerge.
Stipulate the animation’s exact easing. This value is supremely helpful to the people implementing the storyboard later on.
Number Each Panel
Numbering a storyboard’s panels is a best practice sometimes discarded by cinema, but invaluable in web design. Starting from 1, they tell readers which way the action flows. Storyboards could come in vertical or horizontal layouts, and numbers quickly reinforce which mental model everyone should be using. Numbered panels allow quick feedback (for example, ‘What about instead of panel 16, we use a nice fade?’), and let you index what animations and interactions happen and reference them accordingly.
Additionally, numerical panels let you add branching logic to your interactions or show several alternatives. For example, you could group several options for the fourth panel under 4a, 4b, 4c.
Use your words!
When adding notes to your storyboard, always detail why the animation is happening. Be sure you can justify the animation with sound reason. You may have to defend the animation to others, and if you can’t explain why it’s important to yourself, perhaps it’s unnecessary for your users.
In my A List Apart post Animation at Work, I list six different ways you can use animation to underscore relationships and hierarchy. Can you use two of these words to explain your animation?
Each panel (or pair of panels for complex interactions) of your storyboard should demonstrate the following:
What event or user interaction causes which things to animate
How said things animate
Why the animation improves the interaction
Often this breaks down into two panels:
A clear indication of the trigger for the animations (‘When the user clicks the button…’)
A description of the changes that follow (‘…the button fades away to reveal…’)
Colour-code your words, too, with interaction words (like clicked, hover and focus) being underlined or written in your designated interaction colour, and descriptive works (shrink, bounce, fade) using your animation colour.
Bringing storyboards to work
The most common challenge we face when bringing animation to our projects is building a strong rapport with the people who design or code them. The second most common challenge is not standardising those animations we do implement. Both of these lead to inconsistent animation that gives our creations a sloppy, half-finished feel.
Storyboards address both of these challenges: communication and documentation. As such, they are powerful not just for their technical depth, but also for their ability to bring people closer together on a project. This is the spirit in which we must embrace storyboards: not as a tool to dictate but as a conversation to join.
This article was originally published in issue 276 (February 2016) of net magazine.
If you can’t catch Rachel Nabors at Generate San Francisco on 9 June, there’s also a , which will see a rare appearance of top web animator Chris Gannon. Early bird tickets are on sale now.