Aarron Walter » Design

Interview With Aral Balkan on Design and Emotion

Aarron — Tue, 11 May 2010 12:49:36 +0000

I recently spoke with Aral Balkan, the designer and developer of the popular Twitter client for the iPhone – Feathers. The interface design of Feathers has unique points of engagement that is quickly building a strong fan base around it. It’s more than a usable application, it’s pleasurable.

Aral shares some interesting insights into how he is encouraging emotional engagement in his app.

Aarron: How does great design impact a user’s propensity to forgive usability shortcomings, or technical snafus?

Aral: I reject the premise of the question. Great design is design that has few usability shortcomings and technical snafus. Delighters can very easily become a mocking of the user if the base features of the app do not function properly. It’s wrong to see design as separate from usability. We fall into this trap often in our industry because we call everything “design”. What we’re really talking about is interaction design here. It includes elements of graphic design, to be sure, but there is an all-important non-linear, interactive core to interaction design that includes usability. It’s far closer to product design. It includes technical competence. Good user experience is a function of all these elements.

Before your application can create an emotional relationship with the user it must get the basics right. The emotional relationship, the delight, is what you layer on top of this base usability and technical competency.

So yes, if you can create a positive emotional relationship with your users, they may be more forgiving if something goes wrong. But maybe once, maybe twice… if the core of your application isn’t competent you will soon erode that relationship and it may even backfire. Make sure your app competent before considering adding delight to it. Competency is a prerequisite to delight.

Aarron: How does design impact a user’s trust?

Aral:We do judge a book by its cover; it’s an evolutionary trait. We make split second judgements everyday about whether something is friend is foe. In the past, this meant the difference between life and death (and can still do so today, in a dimly lit alleyway, for instance). It’s no surprise that we apply the same, unconscious categorization to designed objects.

However, design is a marriage of form and function. The latter is usually forgotten. Apple’s products are not successful just because they are shiny and beautiful but because they are a joy to use also. So, while looks may initially affect trust, it is function (or rather, the marriage of form and function) that will affect the long-term health of a product.

Aarron: Do you consciously consider emotion in your design work?

Aral:Definitely. My apps are an extension of my character. I see them as authored works; as a conversation. There is a lot of myself in there and I want to have pleasurable, fun conversations with my users. Most of our industry is still talking about features this and features that – the age of features is dead, we’re living in the age of user experience; _execution_ is everything. We should be talking about building empathy into apps – does the app try to understand what the user is feeling and react accordingly? In ‘Avit, for example, if you have a slow internet connection, the little Manto blob gets ashamed, apologizes, even bursts into tears if it takes to long. Even though the problem isn’t with the app itself (slow Internet connection), the app tries to emphatize with the user. It doesn’t just display an indeterminate progress indicator that is emotionless and uncaring.

The bit about how _your_ character is reflected in your apps is important because if your character is a dry, corporate one than that’s what will come across. You have to be genuine. Take the Microsoft Office paperclip as an example. There’s a perfect example of emotional design gone wrong. Why? You have to ask yourself: whose emotions? Whose character? When I see the paperclip, I see Steve Ballmer in paperclip form – it’s everything that people hate about Microsoft (the arrogance, etc.)

Aarron: Feathers has a uniquely cute interface that is atypical of most iPhone apps. Why is that? How does the bird character impact user experience?

Aral:It’s partly because of the target audience – a younger crowd (young at heart?) :) Partly, because the app itself is meant to be fun. Feathers isn’t going to cure world hunger, but it might make Twitter more fun for you. It might help you put a smile on someone’s face with a tweet. And I wanted the interface – and everything about it; the site, the screencast; etc. – to reflect that light, fun, tone. I smile a lot when speaking to people (which really sucks when you have something stuck in your teeth); I wanted the interface to smile too. I tried to translate my smile into a UI.

On the bird character, here are a few tweets I got within hours of Feathers’ launch – you decide :)

@aral I really *LOVE* the singing bird when you send a tweet, twitter is fun all of a sudden!

@thetalldesigner

Very cool feedback via the feathers bird to let you know your char limit. Excellent job @aral

@matthew_goddard

Confession: Sometimes I make too long Feathers-tweets, just to watch the bird turn red. (@feathers_app) :D

@evbjone

Aarron: You’ve show a lot of emotion in ‘Avit as well. Can you talk a little about why that is and how you are trying to shape the user experience?

Aral:Think about how much time we spend interacting with virtual experiences today; on our notebooks, mobile phones, TV sets… User Experience today affects such a large proportion of our lives that we might soon drop the “user” altogether: The stuff we’re designing today affects people’s experiences; their lives. A good user experience today may mean the difference between someone having a good day or a bad day. And there are a lot of bad experiences today. They affect people’s lives negatively. They affect _my life_ negatively. I’m cognisant that, in some small way, the experiences I create can make people happy or they can make them frustrated, angry, and upset. That’s why I spend so much time on – and focus so heavily on – designing the interaction of my apps: I want my apps to make people happy. I want them to get joy out of using them. These are words that we should be using every day when discussing what we’re trying to build – we’re in the business of manufacturing joy and delight, making people’s lives better in small ways; building emphatetic apps.

Simon Sinek on How Leaders Inspire Action

Aarron — Wed, 05 May 2010 11:51:21 +0000

In this talk, Sinek explains the golden circle – a simple model that can guide the way we think about the things we make. At the center of that model is the word “why”, and it’s the thing that separates the good thinkers from the great thinkers.

People don’t buy what you do, they buy why you do it.

Interview With Mark Jardine of TapBots

Aarron — Sun, 25 Apr 2010 15:27:53 +0000

While researching emotional design for my 2010 An Event Apart talks “Learning to Love Humans: Emotional Interface Design”, I interviewed a number of interface designers to gain insight into the processes and techniques they are using to connect with their audience. Mark Jardine the is the designer behind the hugely popular Tapbots iPhone apps.

I spoke with Mark about the design work he is doing. Below is the transcript from our conversation:

Aarron: Convertbot and Weightbot have been successful in a large part because of the engaging design. The interfaces use personification to build emotional connections with users. Can you talk a bit about your design strategy with these apps, and how personality in interface design has impacted the success of Tapbots apps?

Mark: The whole UI concept was really inspired by the movie, Wall•e. They were designed in a way that you could practically guess their function by the way they looked. I really loved that. So when we set out to design Weightbot, I wanted it to resemble a typical weight scale. With Convertbot, we wanted it to feel like it was in the same robot family, yet was designed specifically for the purpose of converting units.

Our concept for the first 2 apps was selling our apps as if they were physical robots. That’s why the icons resemble the interface. We also gave the icons eyes to humanize them a bit. But we use this idea as a selling point and not to distract the user in the actual app. We want our apps to be used seriously, but also give the sense that they are more than just a piece of software.

We did want our users to have an emotional connection to our apps. Most people don’t have a love/joy for software like geeks do. When I switched to the Mac (from Windows), I began to appreciate software design and found great joy in using software that was carefully crafted. Our goal was for everyone to be able to feel like that about software.

Aarron: Some of the interactions in your apps are a bit atypical for iPhone apps. For example, the spin to select interaction pattern in Convertbot could have easily been a series of simple buttons instead. How do the slightly more sophisticated interaction patterns you design influence user experience?

Mark: Again, the goal for this was to make it feel more like interacting with a physical device rather than just software. We wanted to create an experience around what’s normally just a mundane utility.

Aarron: The Tapbots brand experience is cute, informal, yet elegant, which I think creates a sense of fun and joy around your products. Can you talk about how intentional that outcome is, and maybe point out some specific examples of how you shape your brand experience?

Mark: A lot of the look and feel of the brand comes from my art style in general. But our goal was to create a brand with a positive vibe to it. Even our interface has somewhat of a cartoony feel to it. Our goal wasn’t to make it LOOK as realistic as possible. We really wanted it to FEEL real.

The paragraph on our About page really says it all about our company:

“Tapbots are utility robots designed and engineered for your iPhone and iPod touch. Our applications are easy to use, focused, and lots of fun. These amazing little robots are dreamed up and brought to life by Paul Haddad and Mark Jardine. We slave the night away creating—not to make a quick buck, but because we love software. We hope our robots will create the same love for software that we have.”

We wrote that early on and keep it in mind with each app we release.

I should note that our 3rd app Pastebot is a slight departure in the sense that it follows more of the UI guidelines provided by Apple. This is mainly because of the type of app it is. It’s mainly driven by user-generated content and can get quite complex so trying to create a completely new experience wasn’t ideal. We also wanted to take a risk and see how it would work out.

Book Review: Designing the Obvious, Designing the Moment

Aarron — Sun, 13 Jul 2008 17:11:39 +0000

User Experience Designer Robert Hoekman Jr has written a pair of wonderfully lucid books that examine best practices in interaction design. In Designing the Obvious, and Designing the Moment, Hoekman extolls the virtues of understanding specific user tasks rather than generalized user personas. It’s easiest to design usable interfaces when the activity it serves is clearly understood.

Designing the Obvious contains a canon of heuristics developed from careful study of user behavior. As the title suggests, with knowledge of user expectations, and a little understanding of design patterns, an interface can make the steps to performing a task obvious.

Designing the Moment picks up where its predecessor leaves off by pointing out that each smaller interaction adds up to a bigger experience. This book is all about defining our user’s goals, and identifying how we can best help them achieve them.

The conversational tone of Hoekman’s writing and the bounty of compelling, real-world examples he uses to drive home each principle make porting his recommendations into your practice easy. These books read easy, and contain lots of practical information that’s sure to be applicable to your next website or application design project.

Jason Beaird Guest Lecture at The Art Institute of Atlanta

Aarron — Sun, 02 Dec 2007 12:48:29 +0000

Recently Jason Beaird, author of SitePoint’s all time best selling book The Principles of Beautiful Web Design, recently visited my User-Centered Interface Design class at The Art Institute of Atlanta to share some design wisdom. Jason’s design talent and amiable personality are present in his book, making it as fun as it is interesting to read.

Jason’s talk drew upon the core design principles he discusses in his book, and provided students with some practical advice on what to expect in an agency environment. After the talk Jason joined a class critique of a redesign project students had been working on. I think students were a little nervous about being critiqued by the guy who wrote a best selling book on design, but once they realized how down to earth Jason is, they gained their confidence back.

Below you’ll find a podcast of the talk along with Jason’s slide deck for your learning pleasure.

Jason Beaird’s Guest Lecture Podcast | Jason Beaird’s Presentation Slides

Inside Designer's Sketchbooks

Aarron — Tue, 14 Aug 2007 21:39:56 +0000

Moleskine, an exceptionally popular sketchbook/notebook manufacturer, recently sponsored an exhibition at the Art Directors Club in New York called Detour. The exhibition featured 70 Moleskine notebooks filled by various designers, architects, artists and writers providing a glimpse into the minds and process of many creative minds.

Video of many of the notebooks can now be found at YouTube or at the Detour site. There are so many inspiring ways to record one’s ideas illustrated in this video series, all of which drive home the importance of keeping a sketchbook.

I think a lot of people are put off by the idea of sketchbooks because they think it is a place where they are required to make beautiful renderings. If you take away the name “sketchbook” and call it an “ideabook” it mind sound a little less daunting. The purpose of having a sketchbook, notebook, ideabook (whatever you want to call it) is simply to ensure that none of your brilliant ideas slip by you. Keep them cataloged on one place for future reference. It’s also a great place to collect things you find interesting. The practice of cataloging ideas encourages the development ideas. It’s a bit like jumping jacks for your brain, keeping it top working order.

Though there are too many good ones to choose from, here are a few of my favorites in the Moleskine Detour sketchbooks.

The Power of Contrast in Design

Aarron — Wed, 09 May 2007 12:21:04 +0000

As a kid, I was a big fan of Sesame Street. Every show ran a little skit that showed a series of people doing different things, but one was doing something very different. A little song drove home the concept, singing, “one of these kids is doing his own thing, one of these kids is not like the others“. The intended lesson kids were to learn from this is about contrast. Contrast is a powerful, and essential tool in creating designs that communicate to viewers. It tells a viewer where to look, tells them what is most and least important, and creates visual interest. Andy Rutledge has recently written a great article called Contrast and Meaning at A List Apart extolling its virtues, and explaining how you can make effective use of it to build designs that communicate better.

Deconstructing the Design Process

Aarron — Sat, 05 May 2007 17:55:18 +0000

The fear designers experience when confronted with a blank canvas probably comes from being overwhelmed by the plethora of aesthetic and interface design decisions to be made. With too many simultaneous, difficult problems to solve in a design, it can make one freeze up, not knowing which problem to tackle first. It doesn’t help that the design process is often perceived as entirely subjective, as this can also create pressure of having to come up with unique ideas, or identify a compelling style. The perceived subjectivity of design puts the spotlight on the designer. If something is not right with the design, it’s seen as a negative reflection upon the designer personally. It all adds up to a lot of pressure that can keep you from doing your best work, or in some cases, just getting the job done. The way to overcome the pressure is by breaking the process into smaller parts, and defining a step by step strategy that allows you to address each issue of the design separately rather than as a daunting whole. Instead of one monolithic problem, you have lots of small, more manageable problems. Breaking each problem out will also help you arrive at better design results as you will have given close consideration to all aspects of the problem.

1) What Are Your Goals?

Design is inherently connected to specific goals, which are often, but not always, business focused. Clearly define what you are trying to achieve with your design. Are you trying to increase sales of a product, establish brand credibility, or build a community? Be specific, be clear, be concise. You can not evaluate the success of a design without first knowing what your goals are. It is also not very logical to start a design without knowing what you are trying to achieve. If you do, you can bank on the results being off their mark.

2) Conceptualization, What is the Message?

The central focus of any type of design work, whether it’s architecture, print, web design, or industrial design, is the message. The goal of design is to lead the viewer to a predefined message. Always start with the question “What am I trying to say?”. Once you have established clarity on this issue, you can define how you want to say it. The how part of the design is the concept, and concept is king. Think about the designs that you find most inspiring and memorable. Chances are that it was a strong concept that made the impact upon you.

“A good concept poorly executed is better than a bad concept well executed.”

- Curt Cloninger Concepts vary broadly from overt metaphors that are immediately recognizable, to subtle allusions to design history that establish authority in the message. A concept can provide an interesting hook into your message, or simply provide needed support. Either way, defining the message and concept of your design should always be priority number one and should be completed before you start wrestling with aesthetics.

3) Define the User Experience

A list of keywords that sum up the experience users might have helps keep you focused on the big picture. You might include concrete words such as “usable”, and “intuitive”, or more abstract words such as “environmental”, and “trustworthy”. Think about what design techniques could invoke such experiences. Sticking to navigation conventions may help you build the first two experiences, while a natural color palette, photography, and classic serif typefaces may help achieve the second two. No matter how abstract your keywords might be, visual design can communicate your message.

4) List All Elements and Assign Hierarchy

Identify all of the elements that need to be included in your interface. Include the exact labels for the navigation, headings and subheadings, logos, local navigation, utility navigation, content areas (promo spaces, call outs, etc.), and anything else that needs to be included. With your detailed inventory compiled, rank each item according to importance considering your business goals. Now you are ready to position them on the page.

5) Solve the Interface With Wireframes

A wireframe is a simple drawing of a web page that focuses on optimal placement to achieve goals. It is a visualization of the above content inventory, but it does not address aesthetics at all. Don’t get caught up in color, typography, form, and shape. Stick to grayscale and simply position the elements on the page according to their importance. Do consider scale and proportion, though, as you don’t want to have less significant elements occupying an inordinate amount of space. You may want to check out Jakob Nielsen’s research on common eye paths in web pages to determine where the important elements need to be placed. Jason Santa Maria has a great article on wireframes, and shares a helpful case study of a client project. Here’s what a wireframe might look like: Daniel Richards Home Wireframe | Daniel Richards Interior Wireframe. You can compare it to the completed design mockups: Daniel Richards Home Page | Daniel Richards Interior Page, and the final web site. I find the wireframe process the most valuable part of the design process as it allows me to really solve the interface design issues without getting bogged down in type, color, and other aesthetic decisions. You can make significant progress fast. It’s also a great time to check in with a client to ensure that you are still addressing their needs correctly before gettings tarted with teh design mockups.

6) Isolate Aesthetic Decisions

With a solid set of wireframes, you are ready to tackle the aesthetics. Start by considering the grid system you want to use. A 12 unit grid is exceptionally flexible, allowing you to create 2 columns of 6, 3 columns of 4, or 4 columns of 3. If you have a number of different content display scenarios in your site, a flexible grid system like this can be exceptionally valuable. Define your grid unit scale in the preferences of Photoshop, Illustrator, or your favorite design software. As a quick example, if you have a 1000 pixel wide canvas, the individual grid units of a 12 column grid would be approximately 83 pixels. For more on how to use grids in your design, see the Khoi Vinh and Mark Boulton presentation on the topic at South By Southwest, or read Josef Muller’s Grid Systems in Graphic Design. With your grid system solved, next consider the most appropriate typography. The first consideration would be what typeface best relates to the content. If your content is humorous, informal faces may work best. If your content is authoritative, a classic face like Trajan or Garamond convey tradition, and credibility. Knowing a bit about the history of typography is extremely useful in this endeavor. Consider typographic contrast as well. Rather than setting all of the type in the same face, use a complimentary pair or a family if possible (remember that font availability is still a problem on the Web, but we can use CSS font-family lists for ideal preferences). Make sure that heading, subheading, and general copy have unique treatments that effectively communicate the information hierarchy. The type and treatment of copy text needs to, of course, maintain legibility if your readers are going to stick around. When you are setting type, be sure to provide generous margins with a limited line length (around 70 words is ideal) so the content is legible, and feels comfortable to read. Daunting blocks of copy with narrow margins is a sure way to keep your audience from reading a single line. Next, consider a color system for the design. Color has many powerful, psychological associations to be considered. The color system you choose should relate very closely to your user experience keywords, and your design concept. Also consider how your color system can help communicate information hierarchy, or tell the viewer where to look. If you use a monochromatic color system, an accent color will capture the viewer’s attention quickly, as it is clearly different from the rest. Use the accent color sparingly to draw the viewer’s attention to key elements such as the logo, navigation, or an important heading.

7) Refine

As your design builds, inevitably you will have elements that at first seemed important, but soon became superfluous. Refine the design to remove all elements that are unnecessary. If you can take away an element and the design still functions well, then the element is not needed.

8) Revisit Your Message, Goals, and Concept

Design is an iterative process (that’s part of the fun too). You make a design, evaluate it, then make changes, and repeat. A good design is one that has been distilled down to the essentials, and functions as well as it looks. When your design appears to be complete, take another look at your goals, message, and concept. Does the design do what was intended, or does it need to be realigned with the message? It’s a good idea to continually revisit the goals along the way too, to ensure you are not being seduced by discrete design decisions rather than keeping your eye on the big picture. Pin up the goals, user experience, and concept in your work space to keep them in your periphery at all times.

Conclusion

The more you can subdivide the design process into individual problems rather than facing a Mount Everest of a problem, the less you will be intimidated by starting your design. You can tackle design in a rational manor that will help ensure that your designs are more functional, more attractive, and more memorable for your viewers.

Jonathan Snook Guest Lecture at The Art Institute of Atlanta

Aarron — Fri, 23 Mar 2007 21:20:30 +0000

Jonathan Snook, who recently spoke via Skype to my User-Centered Interface Design class at The Art Institute of Atlanta, exemplifies the traits we work to instill in our students. Jonathan is a renaissance web designer who understands aesthetic principles as well as he understands web application development, project planning, and interface design. There are few such people in the industry that can bridge the divide between each facet of the web world, but Jonathan does it with grace, skill and humility. Jonathan shared some interesting case studies of the design process of a client web application, and the design evolution of his own blog. Whether you are a design veteran or a novice, there is always much to be learned from an inside glimpse into another designer’s process. Jonathan’s slides and the podcast of his lecture are listed below for your learning pleasure. Jonathan Snook’s Guest Lecture Podcast | Jonathan Snook’s Presentation Slides

Mark Boulton on Design

Aarron — Wed, 21 Mar 2007 00:14:57 +0000

Mark Boulton recently spoke via Skype to my User-Centered Interface Design class at The Art Institute of Atlanta on the principles of design as they apply to the web, and his experience in the industry. Mark has made a name for himself in the web industry as a typographer, designer, and a skilled writer on these topics. He’s perhaps best known for his insightful, self-published series of articles entitled 5 Simple Steps, which explores core design topics such as the grid, and typography, and will soon be spun into a PDF book of the same name. Perhaps you have seen some of his other articles on A List Part and Vitamin. Mark brings together two traits in his work that rarely mingle, brilliant design talent, and humility that seems to keep him learning and sharing his wealth of knowledge. Mark recently spoke at South by Southwest in two panels, one with Khoi Vinh about grid systems, and the other with Richard Rutter about web typography. I recommend keeping an eye on the SXSW podcast page for the release of these lectures, as they were some of the best of the year, in my humble opinion.

Mark mentioned two important books when he spoke to my class that have guided him in his design work. For understanding grid systems, he recommends Grid Systems in Graphic Design by Josef Muller – Brockmann, and for understanding typography he recommends the appropriately named Typography by Emil Ruder. Here’s Mark’s lecture podcast presented February 28, 2007. Mark Boulton’s podcast lecture on designing for the web