How Do You Design Interaction?
- July 21st, 2014
- 3 Comments
If we have to settlement an interface it’s roughly apparent to cruise to start a routine by drawing. But is this a best way? we once accidentally started by essay an illusory human-computer conversation, and customarily thereafter we continued by drawing.
This altered my approach of meditative and we never went behind to blueprint first. This essay will explain a reasons behind my decision.
I have always been a outrageous suitor of a guys during Basecamp1. Some time ago, we was reading a twitter by Jason Zimdars, one of a designers:
“UI settlement starts with words.” He wasn’t joking. The criticism got a lot of retweets, a lot of favorites. Everyone accepted what he meant — solely me.
Writing Conversations
When I’ve had to settlement an interface communication component, we used to start by sketching probable solutions. (Product settlement is done adult of many layers. See, for example, Jesse James Garrett’s layers3 (PDF) and Intercom’s4. Here, I’m referring to a communication layer.)
5I used to start by regulating a settlement that we know or by duplicating other people’s solutions to a problem or to identical problems. Imagine that we have to settlement a website’s registration form. You could start by “stealing” other designers’ solutions. Or, if we feel confident, we could review a mandate and start to draw.
But we started by drawing.
I once had to settlement a shopping-cart routine for an e-commerce website. we don’t know why, though during a time, before researching probable solutions, we illusory what we do when we go to compensate during a supermarket. we wanted to imitate a identical knowledge on a web, presumably improving it by exploiting a web’s digital capabilities. we wrote down what happens during a supermarket checkout counter:
Cashier: Hi, do we have a faithfulness card?
Me: Yes, please. [I give it to her.]
Cashier: Thanks.
Me: Thank you.
Cashier: Do we need some bags?
Me: Yes, dual please.
[And so on.]
I satisfied that devising a review was many easier than blueprint on a white canvas. I’m not sure, though we suspect that is loyal for many people: Conversation is an unique partial of tellurian nature. We have developed as a articulate species.
Also, when we suppose a conversation, we pull from my real-life experience, that is good for settlement — reduction abstraction. If a user’s communication with a mechanism resembled a real-life experience, thereafter a interface would substantially be deliberate easy to use, wouldn’t it?
Moreover, I compensate a lot some-more courtesy to difference and their meanings when we write than when we draw. The advantage is that when we get around to sketching, we will make fewer mistakes in a copy. Because duplicate is7 an intensely important8 partial of any interface, this is a good side outcome of essay out conversations.
A Real Example
While devising a review is easy, devising a movement of that review is also easy. Back to a supermarket example: we can simply suppose a assistant seeking me possibly we need bags before seeking for my faithfulness card. It’s easy to suppose a assistant seeking me a opposite question. This competence or competence not change a blueprint of a interface. It wouldn’t matter if it doesn’t change anything — what’s critical is that I’ve taken it into consideration. The some-more variations we can cruise of, a some-more assured we will feel that we haven’t missed anything in a final design.
I customarily go from product mandate to a list of use cases to a mockup (i.e. a low-fidelity blueprint or a high-fidelity wireframe, depending on a situation), that becomes a bottom of a HTML prototype. Ideally, this routine would be linear; in reality, it’s a loop, in that any step provides feedback for me to change something in prior steps.
9Because essay enables me to see some-more variations, it improves a efficacy of a loop between “use cases” and “sketch.”
Let’s see this in an example. The following review comes from an tangible project, a web app called Mediaddress, a press bureau software. It’s an repository of journalists’ addresses. One of a mandate of a plan was that people should be means to send emails to one or some-more recipients.
The use box we was deliberation was this: A user has incorrectly comparison 5 people from a list of 100 and has lost to deselect them and instead would like to send an email to a whole list of 100.
Variation 1
Human: I’d like to send an email.
App: Just to a 5 you’ve comparison or to all of them?
Human: All of them.
App: To write a email, would we cite to use your email module or my editor?
11
13Variation 2
Human: I’d like to send an email.
App: OK, I’ll send an email to a 5 you’ve selected. To write a email, would we cite to use your email module or my editor?
Human: No, wait! we meant to send an email to all 100 of them, not only a 5 I’ve selected
App: OK, no problem, I’ll do that. To write a email, would we cite to use your email module or my editor?
15
Based on a use case, I’ve created a review that can simply be translated into a upsurge and sketch. Then, we illusory a movement of a conversation, that constructed a opposite upsurge and sketch. To know that upsurge and blueprint was better, we compared use cases.
I took a box of a user selecting 5 people from a list though wanting to email a whole list. Was this a many visit case? we didn’t cruise so. Wouldn’t optimizing for a user who indeed wants to email those 5 people make some-more sense?
Design consists of trade-offs. We have to always weight a costs and advantages of a options. But we don’t wish to get into a sum of how we confirm that resolution is best. we follow many criteria. My indicate is to uncover since a created review is a useful settlement tool.
I burst behind and onward between created review and flowchart and sketch. But a running apparatus is a created conversation. we find it to be a easiest apparatus to suppose an interaction. The diagrams and sketches (or wireframes) come afterwards. They emanate sequence and assistance me to see a stairs clearly. They are also a improved apparatus to promulgate with developers and other stakeholders.
To promulgate my points:
- Imagining a human-computer review and thereafter sketching it is easier than blueprint a interface directly.
- Imagined conversations are drawn from real-life experience, while approach sketching is drawn some-more from remembered design.
- Copy is elemental to any interface, and essay initial and sketching after enables we to combine on it during a right time.
- Imagining opposite conversations is easier than devising opposite sketches, that creates it easier to come adult with some-more settlement options.
- When we write, we am some-more artistic (because we can suppose some-more variations), and we tend to duplicate other people’s solutions less.
What About Jason’s Meaning?
In a end, have we accepted what Jason meant by his tweet? Why not ask him directly? we wrote an email seeking for his opinion on a routine that I’ve laid out. He was really kind to answer me:
So, we review by a essay and we cruise you’ve flattering many figured out what we was perplexing to contend with a tweet. Imagining a review between a user and a mechanism is a neat approach to cruise of it. we do something somewhat opposite in my possess work. Instead of meditative about a mechanism during all, we try to suppose how Iwould explain a underline to a friend. This has a outcome of being conversational, transparent and helpful. we cruise it’s generally useful to not cruise about computers since it’s so easy to tumble into a patterns we’ve all seen before; “computer speak,” that is terse, leaves out difference and sounds zero like anything people indeed say. we wish my UI to review like I’d contend it, and that means healthy denunciation and full sentences.
I’ll positively rewrite many times in a form of sketches and continue to labour all a approach by a process. It’s many improved to trim and optimize a difference than start with too few. That’s since we cite this routine to drawing. When we draw, we cruise too shortly about a blueprint and a accessible space and what’s too prolonged to fit on a button. Those are too many constraints to understanding with during once. we find it improved to get a difference only right and thereafter figure out a visible design.
Here’s a discerning example. First a computer-speak chronicle we competence draw:
“Delete file”
[OK] [Cancel]
Now a chronicle we competence indeed say:
“Are we certain we wish to undo this file?”
[Yes, undo it permanently] or [No, we wish to keep it]
That’s a small contrived, though we get a idea. we feel like a computer-speak chronicle is an easy trap to tumble in when we pull first. we could positively make a second one down to that if space was intensely limited, though since not start with your best chronicle and thereafter cruise any compromises?
Here are a lessons I’ve noted:
- “I cruise it’s generally useful to not cruise about computers since it’s so easy to tumble into a patterns we’ve all seen before; ‘computer speak,’ that is terse, leaves out difference and sounds zero like anything people indeed say.”
- “That’s since we cite this routine to drawing. When we draw, we cruise too shortly about a layout… we feel like a computer-speak chronicle is an easy trap to tumble in when we pull first.”
- “It’s many improved to trim and optimize a difference than start with too few.”
I followed adult with one some-more question, seeking Jason how this routine helps him to figure out flow, if it does. we wrote:
Let’s contend we have a underline and we start to write. Does essay make we cruise about a upsurge or a feature, and since of that we change a upsurge or a feature? Or is a upsurge or a underline a apart meditative process? Maybe we would make myself some-more transparent with an example. Imagine a bookmark app:
Me: Save this web address.
Computer: OK.
A second version:
Me: Save this web address.
Computer: Before we save it, do we wish to change a pretension of a page? And do we wish to supplement a brief outline of a essence of a page? And do we wish to tab a page (so that it’s easy to collect it later)?
The second chronicle changes a flow. Now, when we wish to save a web address, a forms pops up. In a initial version, we would only see acknowledgment feedback.
Here is Jason’s answer:
So, how a upsurge factors in depends on a situation. Many times facilities aren’t totally isolated. They fit into existent flows and screens — or during slightest start from there. So, we competence have some suspicion of a upsurge already in mind. But I’m always open to improving that if a essay leads me in another direction. But even if it’s something totally new, I’ll start with essay since that helps me figure out a flow. If it takes a lot of stairs to explain a upsurge to your friend, thereafter maybe it needs to be damaged adult into identical verbatim stairs in software. So, a standard essay blueprint competence embody several blocks of duplicate as we figure out a flow. we cruise a critical partial of a practice is reckoning out how we competence cruise of it in a genuine world, rather than simply meditative of it quite as a module problem. That leads to uninformed insights.
These dual emails seem to countenance my method. They also give me new insight. Coming from a higher designer, a feedback fills me with joy. we suspicion we had an strange idea, though maybe it was only a side outcome of carrying delicately review what a intelligent guys during Basecamp have written17. I’m not joking either.
Further Resources
- “5 Principles for Great Interface Copywriting18,” John Zeratsky, Google Ventures
- “Copywriting Is Interface Design19,” from Getting Real, 37signals
- “The Dribbblisation of Design20,” Paul Adams, Intercom
- The Elements of User Experience21” (PDF), Jesse James Garrett
- “BCX: Exporting22,” 37signals
Jason Zimbars and Jason Fried’s contention of UI design
(cc, il, al, ml)
Footnotes
- 1 https://basecamp.com/
- 2 https://twitter.com/JZ/status/364882720914026496
- 3 http://www.jjg.net/elements/pdf/elements.pdf
- 4 http://insideintercom.io/the-dribbblisation-of-design/
- 5 http://www.smashingmagazine.com/wp-content/uploads/2014/07/2-design-interaction-intercom-4-design-layers-explanation-large-opt.jpg
- 6 http://www.smashingmagazine.com/wp-content/uploads/2014/07/2-design-interaction-intercom-4-design-layers-explanation-large-opt.jpg
- 7 https://gettingreal.37signals.com/ch09_Copywriting_is_Interface_Design.php
- 8 http://www.gv.com/lib/5-principles-for-great-interface-copywriting
- 9 http://www.smashingmagazine.com/wp-content/uploads/2014/07/3-design-interaction-writing-in-design-process-large-opt.jpg
- 10 http://www.smashingmagazine.com/wp-content/uploads/2014/07/3-design-interaction-writing-in-design-process-large-opt.jpg
- 11 http://www.smashingmagazine.com/wp-content/uploads/2014/07/4-design-interaction-variation1-flow-large-preview-opt.jpg
- 12 http://www.smashingmagazine.com/wp-content/uploads/2014/07/4-design-interaction-variation1-flow-large-preview-opt.jpg
- 13 http://www.smashingmagazine.com/wp-content/uploads/2014/07/5-design-interaction-variation1-sketch-large-opt.jpg
- 14 http://www.smashingmagazine.com/wp-content/uploads/2014/07/5-design-interaction-variation1-sketch-large-opt.jpg
- 15 http://www.smashingmagazine.com/wp-content/uploads/2014/07/6-design-interaction-variation2-flow-large-preview-opt.jpg
- 16 http://www.smashingmagazine.com/wp-content/uploads/2014/07/6-design-interaction-variation2-flow-large-preview-opt.jpg
- 17 https://public.basecamp.com/1679267/projects/343643-bcx-exporting/todos/5157955-design-the-ui-for
- 18 http://www.gv.com/lib/5-principles-for-great-interface-copywriting
- 19 https://gettingreal.37signals.com/ch09_Copywriting_is_Interface_Design.php
- 20 http://insideintercom.io/the-dribbblisation-of-design/
- 21 http://www.jjg.net/elements/pdf/elements.pdf
- 22 https://public.basecamp.com/1679267/projects/343643-bcx-exporting/todos/5157955-design-the-ui-for
↑ Back to topShare on Twitter
How Do You Design Interaction?
Nenhum comentário:
Postar um comentário