Design Patterns is an excellent resource for inspiration and education of designers.But the usual practice is not equal to the best practice.In this article, we will examine why many common guide interface mode is invalid, and how to use game design principles to enhance the user''s participation.
After the "mobile application UI design patterns" published the first edition, Intuit let me move this dialogue with the team.I have to talk about the high level of design patterns in different industries (clothing, architecture, software, etc.) value, and why they can be a useful teaching tool.
Alissa Briggs, a senior UX manager of Intuit, as a case study from Snap Payrol to follow my talk.Imagine when she read my book (Dialog, How It Works, Tour and Transparency) in each "invited" mode, and pointed out how they are not able to effectively retain customers, I was surprised how.Because users of these additional "helpful" page and confused or frustrated (or both).
Some testing concepts Intuit''s Snap Payroll guide in (from "Dialog, How It Works, Transparency and Tour")
Soon after, I worked and RetailMeNot, guided interface testing iOS and Android applications.The product team wanted to ensure that users understand the value proposition of this tool, and know where to access specific operations (collection of shops, saving coupons, etc.).
We believe very brief guide (three-step) or a video guide should make a difference.Some stakeholders translucent like those ideas, so we tested this.But these are not attracted to the user, they only let users frustrated.
One RetailMeNot test participant said:
"I just want to get into app and start exploring."
In short, user testing shows that users skip or otherwise ignore the dialog box, guide, video guide and translucent layer.At best, users only found a little inconvenient.The worst of times, this mode prevents serious users who want to enter new applications.
Interface concepts of the guide portion RetailMeNot: translucent, video guide, the guide three steps (larger)
Why these modes useless?
So why do these modes useless?I turned to look for the answer in game design.Game designers always know you can not put new players thrown into the middle of a battlefield also expect that they will enjoy the experience.Most players will before figuring out how to fight back on the fire and died.
In game design, some deep convergence method is more effective.The same goes for mobile applications.Although the stakes are not necessarily (virtual) life or death, but frustrating is that when the user feel at a loss, the experience is the same.When such things always happen in your user''s body, your application will game over the.
Portal (Portal) when promoting the game offers players a safe environment to learn how to control.
Extra Credits online video series from an insider''s point of view, thoroughly surveyed the various aspects of the game world."Tutorials 101" is a fantastic video, even if the application designers will be happy to watch (dubbing skip those pesky chipmunks - it was worth it).
"Tutorials 101" lists some basic rules to guide the drafting of effective game, we can extend it to a mobile design:
Use fewer words
Do not say the whole advance
Make it fun point
Enhance learning through play
Listen to your players
Code 1: use fewer words
The most commonly used tool when we want to explain one thing to talk in general is.But when we want the user to learn something, to write down the text into a key."Tutorials 101," that we should avoid relying solely on the text because "it is the pace of murder, destruction of immersion, and is often skipped those players most in need of guidance."
Too much text into a "speak out and not show up" approach, which cuts the benefits of mobile applications.In fact, the guide should be "to show up, rather than speak out"; they should be interactive, allowing users to learn by doing.When a person previously practiced an action, and those who should just be told how to do compared to when you need to use this action are more likely to think of how to do it.
Here are some examples:
Boomerang vs. Mailbox
Boomerang Android version of the text too much (see rule: "Do not say in advance full").
Mailbox of iOS guide text to encourage users to learn by doing.(Watch video)
DigiCal vs. Fantastical
In DigiCal text version of Android, too abstract description of activities.
In Fantastical for iOS guide the user to use the interface they need to know to invite gesture.(Watch video)
Catch (2013) vs. Clear
Catch Android version of the tutorial tells users their own characteristics and actions, but do not let the user try.
In Clear for iOS, the default view has been pre-loaded with some of the tasks, the user can learn by doing.
There are ways to show and can not say when, using text press impulse Chennai.Use text prompt "case" and allows users to view the operation of the "effect".
Code 2: Do not say the whole advance
"If you are pre-loaded with your guide, and tell your players all the things in the beginning," Extra Credits in the "Tutorials 101" said, "they will be submerged information, and the lack of participation", the phrase the words "players" with "user", its significance is obvious application designers.
Do not make users flooded message, anyway, when they need to use, it is estimated that no one remember.When users need to provide accurate information block straightforward.Remember that you are in the manufacture of first impression.Do what you would rather give your users the first impression is despair not want it?
Dooo vs. Todoist
Dooo iOS version of the pre-loaded information eloquent 11.
In Todoist for iOS, a subhead invite users to add the first task, then another prompt appears report describes the options menu.(Larger image)
UserTesting recent article, "From the New Facebook Application Paper middle school to the six UX lesson."Also mentioned" users like tour guide "-" guided tour "series of short interactive prompt that appears when you mean first-time users.
Facebook''s Paper applications use the interactive prompts in the content stream.
Do not put all the information they might need are put out at the beginning.Just when they need to give them a little piece.
Code 3: it is good
In fact, you may remember the Code "Tutorials 101" is "to make it fun points" of course, "fun" is not suitable for all applications.But the video narration says, "Your guide should as much as possible like the rest of the game as attractive," we can find a way, this rule also applies to us.
Although we can not make the learning process more interesting applications, but there are ways to make it beneficial to change, and make it flow seamlessly into the application experience to go global.One good way is to allow the user to actually complete interactive operation.This approach can enhance the user''s learning.
Although the "fun" and not as a right tone, but added some interesting feeling is feasible.Let''s look at two very different applications in this regard, NBC News and Flipboard, which illustrates the correct way.Leave aside the translucent interface that five "interesting" fonts, NBC still looks like a lecture guide.On the other hand, Flipboard at the outset people feel completely different.
No explanatory text, the lower half of the screen to flip a little interesting, to attract you see a flip before.After repeated it once, you probably know that you need to swipe to open the following content.But if you do not, there will be a pop-up window to remind you "to continue paddling".
Flip each gradient are enhanced swipe gesture, whereby new users learn to operate in exploring the content in Flipboard necessary.Interesting and good.
NBC News vs. Flipboard
NBC News for iOS is interesting fonts, but this long-winded no good at all.
Flipboard for Android and iOS embedded interesting tips to enhance the desired application navigation key gesture.
With your application to do more in-depth sense of convergence, where appropriate, consider adding an interesting element for the user to learn by doing and create a sense of urgency.
Code 4: enhance learning through the use of
Remember when you pass a simple test and understand the concept of a surprise moment in science and technology lessons it?This is what we have to say.Of course, after the teacher has explained that concept to you, but when you did the experiment, you really learn.
Boot screen is the same.If you follow the preceding three hands of the Code, which will help to strengthen the means to own a large extent.It can be very simple, such as visual or auditory feedback associated point exemplary operation guide.
Then, when the operation after the user, the same feedback will reinforce what they learn.(If you use the voice feedback to provide a method to turn it off, so that when a user familiar with after application, suggesting that it will not become noise)
This rule is, "Do not say ahead of a full" complement.Do not try to time to show all aspects of your application, carefully arranged so that the user step by step deep into your application.With the passage of time or unexpected "benefits" gradually reveal more features, so you can enhance their knowledge in the application when the user uses.
Following a number of Polar poll answered, it will provide a small incentive to prompt the user.Duolingo users rewarded after the acquisition of skills and upgrade.
Any.do on Android Home placed a small plug-in, to encourage users to participate and provide spontaneous rewards.
Learning is not easy.Using the application should continue to strengthen the teaching guide to help users learn.
Code 5: Listen to your users
Considering that you have in-depth and complete construction of your application for months, who is the best person to explain the application?You should not, according to "Tutorials 101", narration say:
"When you''re a hard-working hard as a year or two designers in the project, those things actually totally incomprehensible, in your opinion, is intuitive and obvious."
In simple terms, as appropriate tests some users may find a lot of problems.Watch where your users are stuck, and encountered a problem where.Listen to their opinions, because they interact with that application.Do not ask them later, if you ask them they use the application, you will be easier to guide them naturally you want to know the answer.
Snap Payroll designers through user testing, eventually found boot experience, tips or context, you can get the best results.Four tests on the RetailMeNot we got the same result.
Snap Payroll context prompts the user to test very well, RetailMeNot also.
Familiar with so that you do not know what the user needs to learn.Allowing users to tell you the user through a fair test.