ixd

Ever tried? Ever failed? No matter. Try Again. Fail again. Fail better.
— 

Samuel Beckett

There is this programming term “failing gracefully,” which basically means that when things go wrong the program is designed to do its best to course correct or give the user another option. Often in this field of interaction design, especially with young designers like myself, there is hesitation on our part to show our failures, even when we corrected them or learned from our mistakes. The more I delve into this world, and in particular the task of landing a job or internship, the more I am reminded that hiring managers do not want to see just the final product that we have created. Rather, they usually are more interested in the process of creating the product than the product itself. Hiring managers want to see every step you took to get there, even the mis-steps. As is the mantra of every middle school math test ever taken, “Show your work.”

Perhaps if we were producing paintings to be hung in a gallery, things would be different. (Not to say that those gallery artists did not do months of pre-production work). As it is, though, we are creating interactions that are constantly evolving based on user experiences, feedback, and the rise of new programs and platforms. If we are not showing the journey from user research, to sketching, to framing, to prototyping, to creation, and back again, then we are only doing an injustice to ourselves. Certainly no one expects near-perfection straight out of the gate. That is an illusory enigma that every designer is constantly chasing. It is the human condition to try and show people the best version of ourselves, even if that is a total misrepresentation of who we truly are. It can feel counter-intuitive to our goals to present ourselves as less than perfect. The reality, however, is that we will fail; It is inevitable. So, let us then embrace how we failed and gracefully turned around the experience to create something even better.

Urban Interaction Design - Online Conversation with Tobias Revell, Manu Fernández and Han Pham

Along with Tobias Revell and Han Pham, and hosted by Martin Brynskov, I will be part of the conversation for the next ten days, discussing the character and relevance of the emerging field of urban interaction design. You can follow the conversation as a series of question-responses rounds and let´s see how the experiment works. You can comment or contribute directly on the site as the three of us share our thoughts.

UX-related Quotes/Notes

These get me through my day. I don’t remember the exact specifics of where most of these came from, most likely from reading (i.e. It’s Our Research) or conferences/workshops/classes (i.e. Adaptive Path, ARTIFACT, Idean, SVA) that I’ve attended. I just thought I’d share some stuff from my personal notebook. Hopefully someone else also finds these useful or motivating?

Induce the viewer to think about the substance rather than the methodology, design, technology, etc… (But always be aware of existing and upcoming technological development in order to propose appropriate opportunities for solutions)

If you have five things you need someone to do, are those things easily found and understood in your interface?

Always look for: emotional cues, relationships, sequence, exceptions
Always do: ask why, be able to explain your thoughts to an outsider, be able to teach another
Always compare: processes, to others, across time

An answer that generates a discussion is a good sign. Keep stakeholders focused on business, not technology. Offer only findings (as a researcher), not recommendations (you should do that together with your client).

Designers are better at viewing strategies from the outside, in, and working with incomplete information.

Discover what users really value and tell their stories so stakeholders can understand and empathize.

“Be conservative in what you send; be liberal in what you accept.” –Jon Postel

What info can you give the user at this point to tip their decision to your favor? Help them make their choice.

Kick-off = building consensus

Invite others to tell their stories / create their versions of your product
*Your product is not the end of your user’s story, it’s the beginning!

The story’s heart should be about connecting people, not about the tool.

“Ask _____ about _____” instead of “Search for _____ on _____”

As a designer, you bring the big pictures (outside perspective) back into internal, siloed teams who don’t get the same exposure.

“Care deeply; be bold.” – Laura Faulkner
(To be the expert or to be humble enough to start over.)

IxD: INTERACTION DESIGN

Interaction Design (IxD) defines the structure and behavior of interactive systems.

Where does it fit within design?

IxD is a subset of UX Design that comes from Human Computer Interactions and ergonomics. It’s interrelated to UI design.

You can break it down into micro & macro interactions.

Macro-level

Macro is considering the UX, specifically flows, and asks: “What’s our distal goal?”  

Micro-level UI

Micro is more UI. What feedback do you get on a specific page? Recommended read Micro Interactions by Dan Saffer. 

How are users interacting? Mouse events and gestures, known as affordances.

Affordances are qualities that make a potential actions possible. For every affordance there should be a signifier, some sort of indicator or signal in the physical or social world that can be interpreted meaningfully.

For example, hover state is an affordance.

What is the signifier? How can you tell that there is a potential action? It needs to be separate and distinguishable from other elements. For an example, check out this product page from Warby Parker and hover over the eye glasses. The mouse changes states, indicating a potential action.

So what’s the anatomy of a mouse movement or gesture? 

Mouse Events

  • click up

  • click down and or hold

  • scroll X,Y

  • right click (two finger, cmd+click)

  • hover state 

  • drag

  • double click

  • speed

  • sound

Gestures

  • tap, double tap

  • swipe: right to left and left to right (start position > end point)

  • flick

  • speed

  • acceleration

  • direction

  • temperature

  • pressure

  • multitouch

  • duration

  • rotation

Bill Scott and Theresa Neil gave us 6 handy principles of Interaction Design. 

Make it direct.

How immediate is the action? Allow users to interact quickly and efficiently with your design by not obfuscating functionality. 

Keep it lightweight.

Allow of micro-interactions that don’t take your user out of the flow. Check out Little Big Details for inspiration. 

Stay on the page.

Reduce the need for adding extra content by using elements like overlays, i.e., a dropdown menu or pop up. At Bonobos, their checkout flow doesn’t take you off your current page until you are ready to pay.

Provide invitations.

Give your user the tools to understand where they are headed. Use explicit calls to action, and don’t leave your user wondering where to go next. 

Use Transitions. 

Illustrate the action just taken. Below, the iPhone lock screen has a great example of this. If you tap on the camera icon, the screen bounces up slightly, indicating to the user that they should swipe up. 

React Immediately.

Respond directly to input, changing input, indicate progress, prevent errors before they happen. 

You’ve heard it before.

Sir Isaac Newton said, “For every action, there is an equal and opposite reaction.” Interaction Design is about crafting those reactions and anticipating those actions to surprise and delight your user!

9

A systems design project for the New York City Metropolitan Transit Authority created in collaboration with Shelly Ni

During the MTA’s monthly board meetings, MTA teams often use different terms to describe lines in the subway system to MTA decision makers, which makes planning conversations difficult. We created a system of visual elements for decision makers to use as a quick reference during meetings, so that they understand what portion of track is being discussed.  This system is medium agnostic — it can be applied to interactive maps, turned into a printed key, or used to compare data sets for decision makers to reference during meetings.

Using data from the MTA, we sketched out a prototype map that included endpoints, names, and train services for every internally used line name.  For example: the Lexington line encompasses the 4,5,6 and Times Square shuttle services, between Grand Central station and Borough Hall station. We soon realized that this was too much information to show at once, and instead designed a flexible system of elements for MTA teams to use across a variety of use cases. Labels from our system can be used to quickly compare service issues and trends across lines. The visual map elements — endpoints and lines — can be used to create print reference maps or interactive ones. Whether the elements we designed are implemented for dashboards, interactive reports, or print references, they share one goal in common — creating a common language for MTA decision makers to discuss and organize data during important planning conversations.

Először indít IxD képzést a MOME. A féléves integrált tervezési kurzuson a User Experience Design (UX) és User Interface Design (UI) ismereteket a hazai digitális piac meghatározó szereplőitől lehet elsajátítani; a képzés a hallgatók számára kurzusként felvehető, de költségtérítéssel bárki jelentkezhet rá január 30-ig. Február 4-én pedig indul is!
— 

A MOME IxD-re olyan designerek, fejlesztők, kreatív és marketing szakemberek jelentkezését várja az egyetem, akik felkészültek az egyéni munkavégzésre, de inspirálja őket a kötöttségektől mentes hallgatói gondolkodás és a közösen kapott feladatok is. A résztvevők a felhasználó-központú gondolkodás ernyője alatt megismerkedhetnek a felhasználói élménytervezéssel, a webes és mobil felhasználók és felületek sajátosságaival, a digitális interfészek grafikai tervezésével, valamint elsajátítják a felhasználói tesztelés alapjait. A kurzus üzenete a felhasználó-fókuszú tervezés fontossága: a résztvevők ennek kontextusában jutnak el az információs architektúra alapköveitől az interaktív prototípusok létrehozásáig. Az oktatást az elméleti ismeretek átadása mellett gyakorlatorientált képzés jellemzi: egy konkrét projekt születik meg a félév során, amit a résztvevők piacképes ötletként prezentálnak a szemeszter végén.

Keep reading

vimeo

It doesn’t get much better than this.