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.

Entrepreneurial Design has been quite the process (see photo above)! I experienced the TechCrunch of Initiation and Wearing Off of Novelty in my first project, and am now residing in the Trough of Sorrow. In an attempt to complete one of the other assignments we have, I cold emailed someone I admire and managed to get myself pretty excited about the possibility of getting to chat with this person. 

To my surprise (sorta), I was turned down for a coffee chat/Google Hangout. Maybe I was too optimistic, but this was a REAL blow to my pride. I read tons of articles about the art of cold emailing and even used the semi-creepy service, Crystal, to figure out which email styles would and wouldn’t work, all to be rejected. After this, I basically packed my things and moved to the Trough of Sorrow. I was pretty down on myself and ultimately, it led to me self sabotaging my Surprise & Delight project. 

It’s hard to get back on the horse after taking a risk and feeling like you’re the single point of failure. It’s worse not knowing what you did wrong, so you can fix it. I value mistakes when I know what went wrong or how I was perceived, but this makes me feel like I’m doing something wrong and I can’t fix it. As a designer, I’m a fixer, so I want to fix this, but I have no idea where to begin. So much so, that I couldn’t even move forward on other projects. I sat down multiple times to share my Surprise & Delight event and each time I was too afraid to press send, out of fear of rejection. Thinking to myself, “What if people don’t participate?” and “Is this the right time?”. 

I think the biggest lesson I’ve learned is: DON’T WORK ALONE. Something about failing with others softens the blow and allows you to support one another in moving on to the next project. I’m not sure how this lesson will apply to sending cold emails, but maybe I’m meant to find network connections to the people I want to be introduced to instead of sending cold emails. 

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!

4

A reminder that, even in 2015, automakers have no idea how to make truly top-notch digital interfaces.

There are some interesting reasons for why good, human-centric design hasn’t caught on with automakers, but I’ll leave that for another post.

Here is the 2016 Lexus RX

instagram

TAKE BACK YOUR DESIGN POWER! This Wednesday, Present your design in the craziest meeting of your life. Never get sidelined again! #ux #defendyourdesign #ixd #cxd #ucd #design

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.)

Very thorough description of Netflix’s rationale. tl;dr - it’s all about the data and algorithms 

As we’ve described in our previous blog posts, at Netflix we use personalization extensively and treat every situation as an opportunity to present the right content to each of our over 57 million members. The main way a member interacts with our recommendations is via the homepage, which they see when they log into Netflix on any supported device. The primary function of the homepage is to help each member easily find something to watch that they will enjoy. A problem we face is that our catalog contains many more videos than can be displayed on a single page and each member comes with their own unique set of interests. Thus, a general algorithmic challenge becomes how to best tailor each member’s homepage to make it relevant, cover their interests and intents, and still allow for exploration of our catalog.

This type of problem is not unique to Netflix, it is faced by others such as news sites, search engines, and online stores. Any site that needs to choose items from a large number of available possibilities and then present them in a coherent and easy-to-navigate manner will face the same general challenges. Of course, the problem of optimizing Netflix homepages has its own unique aspects, ranging from interface constraints to differences with how movies and TV are consumed compared to other media.

We organize our homepage into a series of rows to make it easy for members to navigate through a large portion of our catalog. By presenting coherent groups of videos in a row, providing a meaningful name for each row, and presenting rows in a useful order, members can quickly decide whether a whole set of videos in a row is likely to contain something that they are interested in watching. This allows members to either dive deeper and look for more videos in the theme or to skip them and look at another row. This would not be the case if, for example, the page contained a large, unorganized collection of relevant videos.

To algorithmically create a good personalized homepage means assembling one page per member profile and device from thousands of videos that may be relevant for a member and from easily tens of thousands of potential rows, each with a variable number of videos. On top of that, we need to balance several factors that often compete for precious screen real estate. Our approach to personalization and recommendation largely focuses on helping our members find something new to watch, which we call discovery. However, we also want to make it easy for a member to watch the next episode of a show or re-watch something that they watched in the past, which normally falls outside the realm of recommendation. We want our recommendations to be accurate in that they are relevant to the tastes of our members, but they also need to be diverse so that we can address the spectrum of a member’s interests versus only focusing on one. We want to be able to highlight the depth in the catalog we have in those interests and also the breadth we have across other areas to help our members explore and even find new interests. We want our recommendations to be fresh and responsive to the actions a member takes, such as watching a show, adding to their list, or rating; but we also want some stability so that people are familiar with their homepage and can easily find videos they’ve been recommended in the recent past. Finally, we need to be able to place task-oriented rows, such as “My List,” in amongst the more discovery-oriented rows.

Read the entire post

Here are the tools I used to create my Week 1 Challenge! I decided to send the card to my little sister because we don’t see one another nearly as often as I wish we could. I’m sure she’ll be excited to get something in the mail, especially from me! 

Those few utensils helped me create something so simple that will probably have a much greater impact. Surprising and delighting doesn’t have to expensive or time-consuming, if you use what you have. 

Cheers!

Want to blow somebody’s mind? Turn off a new MacBook, then press down on the touchpad. Nothing happens—it just gives a little bit. There’s no actual button underneath. Then turn it on and press again. Boom: a nice, sharp click that doesn’t actually exist.

You’re being fooled by an electromagnet that provides haptic feedback in response to your press. What’s the point of that? It allows Apple to have a trackpad that you can press down harder—several times harder—to perform a wide variety of functions.

— 

Gizmodo (http://gizmodo.com/new-macbook-review-stupidly-thin-1698424838)

This kind of hardware-software trickery is insane and brilliant.

It’s also interesting that just about every Android phone from the past 7 years had haptic feedback, yet Apple is the only one that took it to the next level and made it feel magical rather than clunky.

In addition, Force Touch has an SDK, so think about how this will impact interactions in applications like Sketch or Sublime Text.

insightful stuff. Read jragon’s Reddit post

An ex-Microsoft design lead who actually worked on Windows Phone has gone public and agreed with my assessment of the platform. It had to change.

Now, you can see a more internal view of what happened. And you can read the entire discussion—and some occasionally silly responses to it—in a Reddit AMA called I designed the new version of Office for Windows Phone, AMA. But here are the highlights.

Why is the hamburger menu in the top left of the display? 

It’s hard to reach, etc. I actually argued for top right. The issue with top right is that no one else does [it]. Being a special unique snowflake works for art but not design. Design should be invisible, so people shouldn’t be thinking ‘oh that’s odd. I’ve never seen this button used like this. I wonder if it does the same thing?’ … The industry decided top left. So to go against it you need to earn it. You need to be far, far better or else it just stands out awkwardly.”

But people need to be able to use it with one hand. “What the research is showing is that people aren’t actually as wedded to one handed use as we used to believe they are. Don’t get me wrong, this is clearly a tradeoff. Frequently used things have to be reachable, even one-handed. But hamburgers are not frequently used, and one-handed use is not ironclad. Combine those two factors together and you see why the industry has settled on this standard. It wasn’t random … And, sorry. But the hamburger has some real issues, but ‘I can’t reach uncommon things without adjusting my hand on my massive phone and that annoys me because it reminds me of the dominant OS on earth” [is not one of them].

But the bottom is better. “It turns out bottom is not better. You’d think that something 3 pixels from your palm would be easier to reach than something in the middle of the phone. But nope. The way average people hold phones means the middle of the device is the best location. Both bottom and top require your hand to make a bit of a shift to reach. You don’t use the hamburger very often … You have to design for the 80% case, no matter how much that annoys the other (vocal) 20%  … Here’s the distinction. Holding with your right hand in the average way makes it super easy to tap the bottom left but actually a bit of a context switch to hit the bottom right. So you put super common things on the bottom left, and important but less common things on the bottom right … Reach isn’t actually the biggest problem though. The issue is ‘why the hell is your app so complicated you need a junk drawer to stuff everything into?’ That’s why Apple doesn’t like it, and I agree. But you try designing Office for Mobile, supporting every feature, without a junk drawer  It’s hard!”

Microsoft UX design can be summarized this simply. “Nav on top, actions on bottom. No user consciously thinks that way, of course. And there will still be some actions tucked into the top. But that’s how the design of the system (in many cases) will work. I’ve thought about it across a ton of apps and it works well.” (This was technically true in Windows 8 too, by the way. Moving on.)

Metro is less efficient than the interaction patterns on Android or iOS. “The interaction patterns in Android and iOS are better designed (at least compared to [Windows Phone] 7). Get into the labs and watch people use all three platforms. There’s data here that not everyone is privy to, but that doesn’t make it less true. There are some real weaknesses in the old Metro patterns … Maybe iOS and Android forced everyone to two handed use with shitty design … [But] big screens exploded in popularity. You’re going two handed.”

If you could change just one thing in Windows Phone, what would it be? 

The interaction models, honestly. The pivots and the panoramas are a nightmare in day to day use. They’re as distinct as a Flower Power iMac, but it painted the interaction models into a corner … If Windows Phone had used stronger [interaction design pattern] models, maybe it would have looked too ‘me too’ … Metro had to shock people. It had to look like its own thing. And it did that really well. Pivots, panos, big text, black everywhere, it looked like art. And more than that it looked different … But I think the platform has paid for it ever since. They stood out, they were distinctive, but the interaction design wasn’t where it needed to be. So you have diehards that love it, but you have the mainstream of the market that struggles with it, if they try at all.”