What I learned at SXSW, Part II

After this Sunday, Austin returns to normal! Thank goodness – traffic has been crazy! I attended two really great sessions that I wanted to share.

Interface Transitions: Designing the Space Between

This panel was led by Jorge Furuya Mariche (HTC, Lead UX designer) and Corey Chandler (Deep Dive Design, Principal IXD), and it focused on just how much transitions can add value to a product, and their capability to set the tone for the quality and character of a design. The example the panelists gave that stuck in my mind was the interior car handle:

photo (50)

Think of this feature in your own car. When you pull on it, does it make a sound? Does it slowly go back into it’s socket (if there is even one), or does it snap back into place? What do these things say to you? Most likely, if the handle has no sort of “memory” feature and snaps back very quickly into its flat position, it creates a more unpleasant experience than if the handle more slowly moved back towards its original position, giving the user some time to move their hand and having minimal feedback noise. This latter experience speaks to a more thoughtful type of design, and translates as better quality. We can think of this in terms of interaction design, too – how do you transition from one state to another?

There are 3 main types of transitions that can occur, as defined by Jorge and Corey.

1. Discreet – a subtle effect that enhances the overall experience on a subconscious level (e.g. the visual feedback you give a user as your page is loading)

2. Educational – instructs user in how something works (e.g. which corners of the screen are ‘hotspots’ by having a traveling or magnified transition to a particular corner)

3. Processing – masks processing time (this can also be a place to show-off just how much information a tool is sifting through)

These can be combined, and don’t necessarily live in isolation. However, one thing to keep in mind is that the more often a particular transition occurs, the more discreet it should be. For instance, unlocking your smartphone occurs pretty frequently, so the design shouldn’t incorporate a really flashy and long transition since it would interfere with the overall experience.

Let Conscience Be Your Guide: Moral Design

The common theme that weaves throughout RJ Owen’s perspective on moral design is to recognize that things co-exist – so, your perceptions affect your actions effect your habits effect your desires which effect your perceptions and on and on. With that framework in mind, then, how can designers explicitly create moral deliverables? The most important issue RJ stresses here is that moral design solves problems and does not create new ones. It does this by being simple and organic – design adds value to the experience and it enhances the audience’s interactions with a tool/product. Good design tells people they are worth treating honestly and with integrity. 

Advertisements

Southby Learnings, Part 1

My colleagues and I are connected via group.me for the duration of SXSW – there’s about ten of us going this year and most of them are visual designers. As we talk about what sessions we plan to attend, I’ve noticed that mine skew much more towards design thinking and theory rather than practical applications. I did want to take the time to summarize some of the best sessions I’ve been to, and how they influence the way I design.

Experience vs Ownership: The Rise of the Experience Economy

By far, my favorite session at Southby so far. Jennifer Hyman, CEO & Co-founder of renttherunway, spoke about the paradigm shift from wanting to own things (i.e. land) to wanting to experience things (i.e. dinner at a new restaurant) and then  broadcast it with our social networks. The important take-away was that as we create access to things we never thought possible, emotional resonance becomes a huge commodity and the service providing this experience must take care to brand themselves appropriately. The example Hyman gave was her own company, where it could have been perceived as gauche and disgusting to borrow previously worn clothing, but instead, the company was able to make it an emotionally valuable and special event.

Something I found interesting was that this talk was titled “Experience vs Ownership” – is it a true dichotomy? At some point, does the eCommerce space encompass both? Do you have the option to buy and become an owner? I hope someone is starting to track data for when someone becomes a experience consumer to a product consumer.

Hacking Cities for a Better, Sustainable Tomorrow

This panel was moderated by Bryan Walsh (Time Magazine Sr. Editor) and the panel consisted of Erika Diamond (Recyclebank, VP Community Solutions), Abhi Nemani, (Code for America, Dir of Strategy), and Rachel Haot (City of New York, Chief Digital Officer). The core topic of this panel was how digital media could help effect change for citizens, and how we could be a part of that movement. At the fundamental level, though, what all these panelists were saying is that data is king. Without data, there is no API, there is no visual representation of what we know. My concern with topics like this is that it always seems to be top-down change; I actually asked the panelists during the Q/A section in what ways are these datasets sustained and consumed within these communities long after hackers get the data they need for study. What I interpreted to be the answer was that those datasets are (hopefully) embedded into a government’s infrastructure (no promises). When I think about the type of design I can practice one day, it’s often in the context of social good or commons – how do we use it to facilitate multi-use spaces, create opportunity for people to engage with each other and access information? And I hope that when I work on these types of issues, design facilitates communities with sustainable resources and knowledge.

Comedy Tech: How Funny Stuff Shapes Our Future

This was a surprisingly great panel consisting of Heather Knight (Marilyn Monrobot, CEO), Joel Warner (The Humor Code, Journalist), Peter McGraw (The Humor Code, Associate Professor of Marketing & Psychology at UC Boulder), and moderated by Alf LaMont (Adler Integrated Marketing, Chief Content Officer). One of the best insights from the session came from Heather Knight, who codes robot comedians (! Her robot can gauge how funny the audience finds it!!). She was talking about her experience in speaking with other comics and trying to see how she could make her robot even more funny and the theme they came back to was that the robot had to be relatable, and in this case, it meant that the robot has to acknowledge it’s a robot. Once that character has been established, we can “relate” to it insofar as we can put ourselves in the character’s shoes. This relates pretty directly to another short session I saw on how likeability gains trust: in essence, the more honest organizations are at revealing themselves, the more trust is accumulated, and the more likeable it is. In terms of designing a system, it means there’s space to be fun and to play with, but also that it can reflect the sensibility of a company. It was a nice reminder that an audience’s perception of your organization effects just how they’ll respond to your attempts at engaging them.

Dell Shop walkthrough

I thought I’d take some time to go through the Dell Shop app I helped design, particularly since the design process helped me realize the lack of best practices surrounding touch devices. This app was created for the Windows 8 OS. (Also, here’s the article  I wrote for uxmag.com on designing for Windows 8.)

Home screen.

Image

This is pretty standard, but one thing you can see is that “Featured” does not have a ‘>’ carrot next to it, indicating that it is not an interactive element. As we go through the site, you’ll notice that Microsoft is really pushing for an exploratory experience, which is super burdensome on the user. And users can be lazy. There are going to be issues.  Also, it begs the question of how you divide up blocks of information – and everything can be a building block for design. For instance, do you differentiate between CTAs and the image? Do you keep those elements separate so that you can manipulate them further at responsive breakpoints?

Search results landing page.

Image

This is tricky – see the touch icons? They’re not interactive, even though it appears that they are; it’s actually one element from the development team’s perspective. The problem is that this image is used in various locations of our shopping hierarchy. In an ideal situation, could that image exist as a separate element from the price stack?  Sure! It could contain a quickview mode since hover does not exists on touchscreen devices. This also means that swipe to select (the standard selection action Windows is pushing) could exist in the same element environment as a tap/touch to view. For clarity: if I wanted to select the XPS 10 product card, I could swipe it anywhere inside the card, including the image, and the action would take me to the next level down (e.g. product details page); at the same time, tapping to select the image also produces another action (i.e. opens up a modal). Having two actions in the same element area, such as the image, is definitely possible, but it means that users will have to understand what each action in a space does, and it also takes extra planning on the part of dev + design. It might also be helpful to note that Microsoft sets some parameters on what elements can have multiple actions (such as scrolling direction) that may affect app/platform design consistency.

Another issue I have been thinking about a lot lately is how a search results page would look on a huge screen. Supposedly, there are no limits, right? We could project this onto any sized monitor or even television set. I believe (and correct me if I’m wrong), that Microsoft has built in some sort of inherent responsive measures, meaning they’ve built their code according to a specific grid scale, and our search results blocks (in this case, the individual card) automatically has breakpoints according to screen size. On a very large monitor, does this make sense? What is an acceptable range of motion for eyes to trek on a screen? On a tablet, it’s easy to swipe horizontally; on a much larger surface area, I wonder if lazy loading information vertically on a dramatically reduced set-width would be easier to scan. Just some thoughts as responsive design takes over my life.

Product Details.

Image

Some cool features that are perhaps not universally beloved on this page. I really enjoy multiple scrolling directions, like what we’ve got going on here with each tab section’s ability to scroll vertically, and then the whole page swiping horizontally to move through the tabs. The product stack on the left is anchored. This is a big no-no says Microsoft, as far as I understand, but e-commerce folks will understand that it’s everyone’s biggest fear that the consumer will get to a product details page and not know how to add the item to cart! (!!!! x10!!). Fear not, stakeholders of the world. I do in fact like the not-at-all subtle ‘this is the product you should buy’ product stack space since it’s a good summary of a lot of potentially confusing tech information. You probably don’t need a product stack for jeans, though, since I can’t see a jeans’ product details’ page taking up more than one screen.

Shopping Cart.

Image

Follows the same pattern as before – cart summary stack stays anchored to the left, user scrolls horizontally to see multiple items.

Checkout.

Image

You can see the anchored left rail is where we do a lot of important functions and proceed forward – this is super important in the checkout process! We don’t want users to proceed without filling out all the right information and we want to save them the stress of having errors returned when there should be immediate error messaging (client-side or soft validation) for simple things like phone numbers or e-mails, as well as client side validation (which is what happens when the user hits the “Review” CTA). I’m wondering how other sites are handling error anchors for long lists (say, your tax forms)? It’s so hard to scan on tablet sized and smaller devices that I’d much rather prefer Microsoft to provide some sort of standard messaging system that is not inline but anchor-linked based (not super applicable to our Dell Shop app but just in general).

J. Crew redesign of checkout

I absolutely love this. J. Crew re-did their (admittedly) out of date checkout process and they’ve combined in-line form fields with category markers. I know Luke W. has written about his Apple checkout process quite extensively and how he’s simplified the process but I’m not convinced in-line instructions are ever that great, particularly for longer surveys (and it looks like several people have written about this topic: here and here).

In this re-design, users still know the section they’re in, but also have short, well-established clues to help them figure out what they should do for each specific field. I also think this type of approach makes it easy to scale for global designs, since it gives flexibility to countries that might have slightly different needs for form fields (including character count and information needs). A cool nice-to-have feature is that your city doesn’t populate until you’ve entered your ZIP, so that information is pre-populated directly on that page.

I’m wondering how accessibility plays out here, and if the red error lining around the form fields could be made thicker to help color-blind users differentiate errors. Looking down toward the address section, it looks like not all error states have error messages, so there needs to be a way for all users to glance through and spot their mistakes.

Image

Screen capture from J. Crew (March 2, 2013).