{"id":1196,"date":"2023-10-11T06:26:20","date_gmt":"2023-10-11T06:26:20","guid":{"rendered":"https:\/\/international.binus.ac.id\/graphic-design\/?p=1196"},"modified":"2023-12-11T06:52:28","modified_gmt":"2023-12-11T06:52:28","slug":"the-5-pillars-of-interaction-design-2","status":"publish","type":"post","link":"https:\/\/international.binus.ac.id\/graphic-design\/2023\/10\/11\/the-5-pillars-of-interaction-design-2\/","title":{"rendered":"The 5 pillars of interaction design"},"content":{"rendered":"

Good interaction design is driven by a human connection. But what drives human connection and how does that translate into a computerized interface? The answers to these questions\u00a0aren\u2019t so black-and-white. In our experience, we\u2019ve found that success depends on the perfect execution of UX fundamentals.<\/p>\n

1. Goal-driven Design – <\/b>Even if you\u2019re not personally conducting user research, you still need to know how to build the insights into the design.<\/p>\n

\"Persona_John_Michelle\"
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Source:<\/i>\u00a0MailChimp Personas
\n<\/i><\/p>\n

We\u2019ve found these UX processes help you empathize with users as people made of flesh and blood:<\/p>\n

1. Personas \u2014\u00a0<\/b>Personas are fictional characters created from the behaviors and psychologies of your target users. Personas come in handy as a reference when making crucial design decisions, for example, \u201cWhat kind of checkout process would Sally the Seasonal Shopper prefer?\u201d<\/p>\n

2. User Scenarios \u2014\u00a0<\/b>Related to personas, user scenarios explain how the personas act when using the site. For example, \u201cIt\u2019s Black Friday, and Sally the Seasonal Shopper has a long list of presents to buy online before work.\u201d User scenarios force you to explore the context in which the persona interacts with your product.
\n\"experience
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0Source:<\/i>\u00a0Detailed Experience Map<\/i><\/p>\n

 <\/p>\n

3. Experience Maps \u2014\u00a0<\/b>Going one step further from user scenarios, experience maps chronicle all the conditions surrounding a single interaction, including emotion and external circumstances. \u201cAngry that her skiing trip ended in a broken leg, Sally the Seasonal Shopper must do her Christmas shopping as quickly as possible.\u201d<\/p>\n

These three techniques create a complete picture of the experience: the user, the scenario, and the entire emotional journey.<\/p>\n

2. Usability<\/b><\/h3>\n

Usability is the bare minimum for design. If your audience can\u2019t use the product, they certainly won\u2019t desire it.\u00a0Let\u2019s look at\u00a0EventBrite<\/b>\u2019s seat designer.<\/p>\n

This online app lets event organizers create a reserved-seating event from start to finish with a high level of detail (such as determining rows, tables, and a dance floor, if needed). It consolidates a multi-step, multi-program process into a single linear path.<\/p>\n

Like Eventbrite, a system\u2019s usability must be effortless. The less attention the user pays to figuring out the system, the more they can accomplish the task at hand.
\n\"evenbrite
\n\"eventbrite
\nSource:\u00a0<\/i>EventBrite Seating Designer<\/i><\/p>\n

3. Affordances & Signifiers<\/b><\/h3>\n

The concept of affordances is that a function must speak for itself, and suggest its own use (i.e. a road\u00a0affords<\/i>\u00a0walking). Signifiers hint at the affordance (i.e. the road\u2019s flat surface\u00a0signals<\/i>\u00a0you to walk with your feet).<\/p>\n

Affordances in Design
\n<\/strong><\/p>\n

Without signifiers, users can\u2019t perceive the affordance.<\/p>\n

In the above example, you can see the progression of button design. The first stage lacks any signifiers and looks just like standard text, while the third stage resembles a button with its rounded edges and gradient.
\n\"iphonedock\"
\nSource:\u00a0<\/i>Affordances in Design<\/i><\/p>\n

Signifiers also work as metaphors, because people also need to know\u00a0why<\/i>\u00a0they would interact with something, not just\u00a0if<\/i>\u00a0it\u2019s possible. In the above iPhone dock example, you can see how the rounded edges let us know that we can interact with the buttons, while the metaphorical images (phones, envelope, musical note) communicate the purpose.<\/p>\n

4. Learnability<\/b><\/h3>\n

In an ideal world, a user remembers every function after a single use. Reality is much different. Familiarity and intuition must be designed into every interface.<\/p>\n

Successful interaction design boils down complexity by creating\u00a0consistency\u00a0and\u00a0predictability. For example, don\u2019t make some links open in a new tab while others redirect the user. Likewise, don\u2019t use a lightbox for some images while others open in a new tab.<\/p>\n

Consistency creates predictability, which improves learnability.<\/p>\n

A common tactic for improving learnability is using UI patterns. Many sites and apps already use these patterns so the user is familiar (plus the pattern is consistent), and you\u2019re still allowed plenty of creativity to customize the design elements for your site.<\/p>\n

For example,\u00a0breadcrumbs<\/a>\u00a0are a common web pattern for helping users navigate. It doesn\u2019t matter what site you\u2019re on, if you see breadcrumbs, you understand how they work. This familiarity lends itself to a product\u2019s learnability. When products are learnable, it encourages people to use those products, which naturally improves usability.<\/p>\n

5. Feedback & Response Time<\/b><\/h3>\n

Feedback is the heart of interaction.\u00a0Since every interaction is a conversation between your user and product, your product better be friendly, interesting, and helpful.<\/p>\n

Whether an elaborate animation, a beautiful\u00a0micro-interaction<\/a>, or a simple\u00a0beep<\/i>, your product must communicate if the task was or was not accomplished (and what to do next).<\/p>\n

In the below example from Hootsuite, the owl simply \u201cgoes to sleep\u201d after a long period of user inactivity, which makes sense since the app pulls in data from Twitter (and doesn\u2019t want to overload the API). The feedback is intelligent and fun, and actually turns a possibly negative experience (stopping updates) into a positive one.<\/p>\n

Another key factor in feedback is response time. The best response times are\u00a0as immediate as possible<\/a>. Imagine how infuriating it would be if you were playing a guitar, and every note came seconds after strumming.<\/p>\n

5-Step Process for Improving Interactions<\/h3>\n

Now that you know the fundamentals, we\u2019ll describe a process we\u2019ve found helpful to nailing the details.<\/p>\n

\"IXDA
\nSource:\u00a0IXDA Columbus<\/p>\n

<\/em><\/p>\n

As notable interaction designer Stephen P. Anderson advises, it can be eye-opening to have someone\u00a0pretend to be your interface while you interact with them as a user. You\u2019ll be able to hear out loud any awkward responses from the interface, which will help you avoid creating robotic interactions that feel inhumane. Once you\u2019re done with the role play, you can start scripting the narrative and restructuring interaction.<\/p>\n

Here\u2019s the process:<\/p>\n

Roleplay the interaction\u00a0\u2014\u00a0<\/b>Grab two people, one to act as the interface and the other to take notes. Make a browser window prop to be held by the interface person and show the interface on a projector. Then, start a dialog with you as the user explaining their goal, and the \u201cinterface\u201d limiting their responses only to labels, menus, and anything else on the UI. Check out this\u00a0video\u00a0and\u00a0transcript\u00a0to see how it plays out.
\nMap out the narrative\u00a0\u2014\u00a0<\/b>Document each step of the experience, including tasks and emotions. As discussed in\u00a0The Guide to UX Design Documentation, this can be as simple as a few user scenarios or as complex as a\u00a04-stage experience map.
\nSimplify the steps<\/b>\u00a0\u2014 Users sometimes have goals that require many steps (buying a car online, booking airline tickets). As recommended in\u00a0The Guide to Prototyping, your interface must be able to separate a complex goal into simple steps (like asking for a destination, then a departure\/arrival date, etc). For example, Virgin America\u2019s stepped form design make the booking process feel much easier than it is.<\/p>\n

Limit user choices\u00a0\u2014\u00a0<\/b>This is probably the hardest step, but you must minimize the actions available to users. Always ask yourself if all the choices are critical for that moment in time. If not, separate it for another conversation.<\/p>\n

Pay attention to micromoments\u00a0\u2014\u00a0<\/b>A micromoment is when a person might hesitate, advance, or stop when engaging with interfaces. If you look back to the role-playing exercise, you\u2019ll remember the moments of apprehension. To clarify the conversation,\u00a0take advantage of microcopy\u00a0and UI patterns like contextual actions and selection-dependent inputs (which we discuss in\u00a0Web UI Patterns 2014).<\/p>\n

Just like a magician\u2019s trick will fail if the details are off, just one bad interaction can ruin the entire user experience. The process we described above will help you approach interaction design as a conversation rather than just a way of animating interfaces.<\/p>\n

If you\u2019d like more inspiration and examples of good interaction design,\u00a0this Quora thread\u00a0includes great sources ranging from films to websites like\u00a0Core77\u00a0and\u00a0PatternTap.<\/p>\n

Closing<\/h3>\n

Interaction design isn\u2019t about how interfaces behave, it\u2019s about adapting technology based on how\u00a0people<\/i>\u00a0behave.\u00a0You must know your target users like and expect, functionally and emotionally. Based on the technological constraints, you must then design the product for desirability.<\/p>\n

The best interaction design is barely there: your product responds promptly, doesn\u2019t require much thought, and works like a good magic trick.<\/p>\n

 <\/p>\n

Source: The 5 Pillars of Interaction Design (thenextweb.com)<\/p>\n","protected":false},"excerpt":{"rendered":"

Good interaction design is driven by a human connection. But what drives human connection and how does that translate into a computerized interface? The answers to these questions\u00a0aren\u2019t so black-and-white. In our experience, we\u2019ve found that success depends on the perfect execution of UX fundamentals. 1. Goal-driven Design – Even if you\u2019re not personally conducting […]<\/p>\n","protected":false},"author":41,"featured_media":1199,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-1196","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles"],"_links":{"self":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/posts\/1196"}],"collection":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/comments?post=1196"}],"version-history":[{"count":3,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/posts\/1196\/revisions"}],"predecessor-version":[{"id":1200,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/posts\/1196\/revisions\/1200"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/media\/1199"}],"wp:attachment":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/media?parent=1196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/categories?post=1196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/tags?post=1196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}