Human Computer Interaction


Human-computer interaction (HCI) is an area of research and practice that emerged in the early 1980s, initially as a specialty area in computer science embracing cognitive science and human factors engineering. HCI has expanded rapidly and steadily for three decades, attracting professionals from many other disciplines and incorporating diverse concepts and approaches. To a considerable extent, HCI now aggregates a collection of semi-autonomous fields of research and practice in human-centered informatics. However, the continuing synthesis of disparate conceptions and approaches to science and practice in HCI has produced a dramatic example of how different epistemologies and paradigms can be reconciled and integrated in a vibrant and productive intellectual project.

2.1 Where HCI came from


Until the late 1970s, the only humans who interacted with computers were information technology professionals and dedicated hobbyists. This changed disruptively with the emergence of personal computing in the later 1970s. Personal computing, including both personal software (productivity applications, such as text editors and spreadsheets, and interactive computer games) and personal computer platforms (operating systems, programming languages, and hardware), made everyone in the world a potential computer user, and vividly highlighted the deficiencies of computers with respect to usability for those who wanted to use computers as tools.


Sketching with Technology: Rapid Prototyping a Phone for Design Research

Design Research doesn’t exist in a vacuum; its purpose is to inspire design. By bringing a high-fidelity prototype into the field, we were able to move between Design Research and Design fluidly.

“Testing designs with paper prototypes doesn’t work. It’s too different from participants’ mental models for us to get good feedback,” IHan, a fellow design researcher at frog, told me. It was the week before we left for Malawi on a five-week frogImpact program, and she had already spent several months doing design research there. We’d been brainstorming a research plan for our program: evaluating an Interactive Voice Response system (IVR) for a free health and nutrition hotline. The conversation got me thinking, “What if we don’t use paper prototypes to test our ideas? What if we actually made a phone?”

Design research as a foreigner in developing countries is challenging in many ways. One obvious obstacle: we stick out. Arriving in villages can be a big event with the whole village showing up for an interview. As a result, design research participants try to give you the answers they think you want to hear. Compound that with language barriers and cultural nuances and talking about how participants feel about a service is much less informative than observing them using a service. This is why paper prototypes are another obstacle. With this in mind, I walked over to our frog Seattle studio maker station (where I’m based) to chat with two of our Design Technologists. Ric Ewing and Kaz Saegusa were tinkering away and I asked, “Do you guys think we can build a phone-like prototype that I can take to rural Africa this Friday?” Ric, without skipping a beat, said, “Oh yeah, I’m sure we can do something.”

Thus began 48 hours of rapid prototyping, anxious anticipation of an Adafruit delivery, 3D printing on our New Matter printer, and Kaz quickly cranking out processing code. The result was an Arduino-run keypad input device with a 3D-printed phone case and a desktop application with a JSON file to redesign the phone tree and add new audio files. After a few 3D-printing snafus — and a late night hand-off in a grocery store parking lot — the prototype phone was packed in my suitcase and on its way to Africa.

Design Research doesn’t exist in a vacuum; it’s purpose is to inspire design. By bringing a high-fidelity prototype into the field, we were able to fluidly move between Design Research and Design. This is particularly important in developing countries were technological literacy is lower and testing ideas can be a more effective way of getting to insights than other conversations and artifacts.

We are currently iterating on the prototype design and have used v2 in both Zambia and Ghana. Have prototyping stories to share? Let us know in the comments.

Written by:

An Introduction to Emotive UI.

Historically, emotion has been thought of as a byproduct of design–not something that drives the user experience. But emotion is actually a critical new dimension in UI, and one for which designers are ultimately responsible. Huge Ideas recently spoke with Sherine Kazim, managing director of experience design, about her recent talk, “Can You Feel Me? How Emotive UI Will Change the Way We Design,” which she presented in June at the Awwwards Conference in New York City.

Huge Ideas: What exactly is emotive UI?

Sherine Kazim: There are certain things designers want you to feel when you use their products, and you can hear it in the way they talk. Clients often say: “We want to surprise and delight our users.” But really, that’s just scratching the surface. Humans are a mess of emotions–and designers are going to have to learn to engage with all of them.

Robert Plutchik, an academic psychologist who (literally) wrote the textbook on emotions, in 1980 introduced the concept of eight basic emotions–joy, trust, fear, surprise, sadness, disgust, anger, and anticipation. His “wheel of emotions” shows the interplay of those emotions, and their varying levels of intensity.

Emotion Wheel.png


To me, the form of UI that most accurately reflects our emotional spectrum is…emojis. I created an emoji-based version of the wheel:

Emoji Wheel_transparent.png
You can see in the chart that there is a dissipation of intensity that happens as you move further out on the wheel, and in design, nobody is talking yet about that. We currently design things that make people feel basic emotions–maybe joy or sadness–but we don’t talk about how we should adjust the UI according to how the user’s emotions may be intensifying or dissipating.

Huge: When you’re designing products, do you think about people’s emotions being closer to the center of the wheel–more intense–or the outer ring, where their emotions are less intense?

SK: We tend to create products that aim for the center-wheel emotions, because it’s the easiest thing to convey. We rarely think about the full spectrum, and we don’t think about the dissipation. Currently, most designers think about the design intention and the user reaction: “I want to make you happy,” and the user is happy.

But here’s what a user interaction might look like in the real world:
When someone designed this particular object (that is, a mailbox flag), they weren’t thinking about emotion. They were thinking about an object. Then along comes a user (Ralph), and he clearly thinks, “Hey, this looks like a really fun thing to do.” Once the flag is down and the fun is over, you watch that emotion dissipate. In Ralph’s case, he even transitions to another emotion: sadness. That whole spectrum happens in a 3-second GIF: Ralph is feeling joy–but from a design point of view, we never got around to addressing the more intense ecstasy, or less intense serenity, even though Ralph went through all those emotions and more. We need to start intentionally designing for every single emotion that Ralph is going through.

What that forces us to do is fine tune communication between people and products–to design for a primary emotion as well as its dissipation–and the relationship we have there. Ultimately, we’re trying to make deeper, more meaningful connections with the user and the best way to do that is to fully understand and manage their emotional spectrum.

So how do you think about designing for one specific emotion–beyond the typical “delight.”

SK: Designing for emotion can be subjective, but here’s my interpretation of something that gave me joy:
This is super fun. Things bounce around, there’s bright color and movement and music that brings back amazing memories from when I was a kid. I even get to make something that’s a direct reflection of myself. The design intention is pure ecstasy, and the user reaction, pure ecstasy.

Or what about designing for fear–what does that look like? It’s difficult to come up with examples, but I found one example when I was in a Seoul train station–and it’s an example of designing for fear, gone wrong.

I remember sitting there looking at this piece and thinking, “OK, I don’t speak Korean but clearly I am supposed to run away from a bomb, run away from an explosion. Not sure why I’m running toward the trees.” I’m not entirely sure what I should do, and it seems the intention was to deliver the information in a neutral way. But my reaction to it was “Holy @#$!, I’m not getting on that train, because I don’t want to be anywhere near where these things can happen.” Absolute terror. You start to feel the responsibility of the designer in considering the emotions of the user–in this case, the person viewing the sign.

Or, think about designing for anticipation. Look at the Japan Quake Map. It’s relatively old, but it’s still very powerful. The UI of the quake map shows the quake depth. You see the clock running, but beyond that there’s nothing else going on–until you’ve waited for a couple of minutes:
That first day is the day Fukushima hit, five years ago. Without even realizing it, the data itself is managing to not just to create anticipation, but also elicit an emotion–grief. All that with very few UI cues. That wasn’t intentional, but it illustrates why we need to take responsibility when we create something to put in front of a user.

What about designing for surprise? Is that even a good idea?

SK: Surprise for me is a tricky one because I rarely agree with surprising a user in the interface–with one exception–games. When it comes to games, surprise can be paramount to their success.
Who would think to put an apple in front of a sleepwalker to stop him from hurting himself? It’s gorgeous, interesting and wonderfully surprising.

So that’s 4 of the 8 essential emotions. What about the rest?

SK: What’s interesting is I could only hit on 50% of the basic emotions–not to mention all the others on the rest of the wheel. There’s no clean way to capture that stuff in UI currently – at least, not visually. That’s because as designers we’ve done such an excellent job simplifying visual UI. And while I like that, I’d love to see products be more multi-dimensional so they have their own personalities, just like users do.

How does AI fit into all of this?

SK: As AI becomes more prevalent in our lives, it’s only going to get more complex, because we’ll need to focus on the personality of the user and how it interacts with the personality of the AI. We can no longer solely rely on just the visual representation of the UI. This is good because it will ultimately allow us to form a more reciprocal relationship between the user and the brain behind the interface as we move away from screens.

It’s challenging but know this: products and platforms will change, but our spectrum of emotion will not change. This, to me, is the key takeaway–that we have a finite set of emotions and there will never be a sadness 2.0. It’s actually great that we have that constraint to work within because it’s going to help us design better product relationships for the future. It’s not just about designing for intention and reaction–it’s about understanding the full spectrum of emotion and the dissipation of each one and so we can start to develop true product personalities. The minute we design for all the variations of basic emotions, we know we’re heading toward solid territory for future design.

Written by

How to Use Sketching in User Experience Design

Have you ever wondered how you could convey your design decisions more effectively to your colleagues and users in a timely and cost-efficient manner? Have you found yourself stuck in a design, unable to see alternative approaches? Are you sure you are applying usability engineering to the right design or to the only design you have? You can rely on sketching, a proven design tool, to help you explore your design space more fully, avoiding the pitfalls of focusing on suboptimal design choices ahead of time.

Bill Buxton, a Canadian pioneer in the human-computer interaction field and a principal designer at Microsoft Research, thinks software development lacks a “design process” that helps UX designers gain clarity about their design decisions before building a system. With this in mind, Buxton and his colleagues wrote Sketching User Experience: Getting the Design Right and the Right Design and Sketching User Experiences: The Workbook to help UX designers (re)discover sketching as a time-tested tool with ample application in the design of experiences with digital technology. Here, we distil the key ideas found in both books for the busy designer to help you (re)discover how you can improve your daily work through sketching.

“… there are techniques and processes whereby we can put experience front and centre in design. My belief is that the basis for doing so lies in extending the traditional practice of sketching.”

Sketches and prototypes have distinctive roles in the development of a design concept and its refinement. You should use them at different stages. Draw sketches first in the exploratory stages of a design to propose, refine, communicate and critique your ideas in a “tangible” format. Later, use low-fidelity prototypes to test broad concepts and specific features.


The ABC’s of Sketching
Lines, triangles, rectangles and circles are the building blocks of any sketch. You can likely draw these shapes with varying degrees of dexterity. Experiment with variations in line thickness and hatching style to increase the power of these basic elements so as to convey the salient features of an object.

As you gain dexterity observing real-world objects to extract their constituent parts in your mind, you will become adept at recreating them on paper through your own sketching vocabulary. Keep in mind, your sketches are not meant to be a detailed representation of an object.

You can use stick figures and variances in their postures and poses, along with motion lines, to represent people and actions. Use subtle variances in the posture of stick figures paired with symbols to convey different emotions.

Faces are our preeminent medium to convey emotions. Use simple variations in the eyebrows and mouths to represent a wide range of emotions in a sketch like those shown below.

You can combine facial emotions, postures and objects to represent actions and situations. Constant practice is the only way to increase your comfort level and reliance in sketching as a key design tool.

Enhancing Sketches – Annotations, Arrows and Notes
Sketches must rely on the written word to convey their meaning in full. Your sketches and accompanying text must communicate your entire design rationale to you and your team. All the following elements play their part in explaining your sketches and the objects, actions and emotions they represent.

Annotations – These are names, labels and explanations located next to different parts of a sketch to expand and clarify the meaning of any element depicted. Tie annotations to different elements in your sketch using arrows, braces, numbering and spatial proximity. Write your annotations using a different colour that contrasts with the sketch proper.
Arrows – Apart from pointing to specific elements in a sketch, use arrows to illustrate interaction flow, a sequence of events, movement and direction.
Notes – Any text, long or short, that provides additional insight into your sketch is a note.


Sketching Methods
You can also use sketching as a collection method. Use sketching to capture the ideas and/or designs you encounter in your daily activities. Other people’s designs are concrete examples of solutions posed to challenges under different constraints. Add them to your knowledge bank to remix, influence, inspire or steer your own ideas in different and perhaps unexpected and innovative directions. To help you in this process, we introduce below two simple approaches to collecting virtual and real-life designs.

1. Scribble Sketching

The idea behind this sampling technique is to capture, as fast as possible and with the broadest of strokes, the essence of the object, design or action we are trying to preserve. Leave out non-important details, decorations, text and other non-essential elements. Include textual annotations (see previous section) in your scribble sketches to clarify functionality.
Author/Copyright holder: Espen Klem. Copyright terms and licence: CC BY 2.0
Capture with “broad strokes” the essence of the object, design or action you are trying to preserve.

As a designer, you will find it’s a great idea to make a habit of always carrying a notebook to keep a record of objects, designs and actions that provoke or inspire you. Since you are the main audience of the scribble sketching technique, don’t feel forced to strive for fidelity. You should only provide a level of detail that is good enough to prompt your memory afterwards. Those rough etchings thus become direct touchstones with ideas and also skeletons you can eventually refine into powerful final versions.
2. Sampling with Cameras

The goal of this sampling technique is to use still photos and video to capture some features of the world. You can apply this sampling technique during your weekly grocery shopping, while running your favourite route, on your commute to work, or when you meet friends for dinner. The pervasive nature of smartphones should facilitate this activity. Capture objects, designs and actions that delight, inspire and irritate you.

Record of Failed Design Efforts
Use the two sampling techniques described to keep a record of failed design efforts. Gather objects and situations that annoy you. Write down the reasons behind this negative effect. This exercise will help you develop a critical eye. A critical eye will allow you to identify even the shortcomings of your own work. In doing so, you will develop and show more sophisticated design skills.

Record of Successful Design
You should also use the sampling techniques mentioned to keep a record of successful design. They will help you draw inspiration from multiple domains to ground your design work on features other than those of the digital realm.

The Take Away
Sketching is a time-tested approach to propose, explore, refine and communicate your design ideas. Sketching should be your first line of attack when faced with a new design challenge. Unlike prototypes, you should produce sketches in abundance, on a very low budget and with just the right amount of detail in the early stages of the design process. Use sketches to explore multiple design directions simultaneously. Refine your chosen design with the standard tools of usability engineering to ensure it satisfies all relevant requirements. Sketch, sketch, sketch!

References & Where to Learn More
Bill Buxton, Sketching User Experiences: Getting the Design Right and the Right Design, 2007
Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt and Bill Buxton, Sketching User Experiences: The Workbook, 2011
Tohidi, M., Buxton, W., Baecker, R. & Sellen, A., Getting the Right Design and the Design Right: Testing Many Is Better Than One Proceedings of the ACM-SIGCHI Conference on Human Factors in Computing Systems (p. 1243–1252), 2006:

What is User Experience?

More and more companies are learning that to stay competitive, they need to be investing in user experience, but they don’t necessarily know what it means. The good news is, there’s never been a better time to learn about UX. Whether you want to become a professional UX designer or researcher, or you just want to learn the principles of UX to create better products, designs, and campaigns, we’re here to help you get started.

In this post, we’ll share our thoughts on what UX is, and what the field will look like in the future.

The Definition of User Experience

The exact definition, as outlined by the International Organization for Standardization, is a “person’s perceptions and responses resulting from the use and or anticipated use of a product, system or service.”

Or, more simply, user experience is how you feel about every interaction you have with what’s in front of you in the moment you’re using it.

There are many facets of your experience, none of which can stand on their own. For example, it’s a common mistake to equate usability to user experience. Usability addresses whether or not you’re able to achieve a task or goals with a product or service. But simply being able to achieve your task of picking up some carrots and paper towels at the grocery store doesn’t give us the whole picture of how you felt about your shopping trip.

honeycombCreating a great user experience requires a user to answer these questions:

Can you use it? One of the most basic requirements of good UX is actually being able to achieve what you’ve set out to do. If you can’t use the product, then the product is useless to you.

Can you find it? Finding the information you need is also important. Is the navigation menu intuitive? Is the search bar where you thought it should be? If you have to think too much about how to find what you need, the UX is lacking. This also applies to being able to find the product itself—whether by searching online or by other means.

Does it serve a need that you have? A product can be beautifully designed and easy to use, but if it doesn’t help address a need you have, you’re not going to be interested in it.

Do you want to use it? If a product’s design is intuitive and a delight to use, you’ll want to use it. And if it’s not? Even the most useful and functional product can provide a poor user experience if it’s a total bore, or the user has no incentive to use it.

Do you find it valuable? If a product doesn’t provide some sort of value in your life, chances are you won’t use it for long. Does the product save you time, or money? Does it help you achieve personal or professional goals? Whatever the benchmark is, a product should add some value to you when you use it.

Do you trust it? Credibility is huge. If you don’t trust a website, you’re not going to give them your credit card information to make a purchase.

Is it accessible to you? If you can’t get to your intended destination, you can’t utilize the goods or services offered there. Users with disabilities must be considered to ensure everyone has access to your product.

These elements guide not only the design of a great experience, but how we test, research, and measure them too. And they all need to work in tandem as well. Leave out any one (or more) of these elements and you’re treading into bad UX territory.

To illustrate this, imagine you’re purchasing an airline ticket online. The website is beautiful, flights were easy to search, and fares were clearly displayed. You were able to find what you needed easily, and the experience was smooth and pleasant. And then you try to book your flight. The checkout process is clunky and confusing, and when it’s time to put in your payment information, you’re not feeling great about the airline anymore, and you start to question your purchase.

Each aspect of the user experience is important and has its own special characteristics, but they all work together to create a good—or bad—experience.

The difference between user interface and user experience
We can’t talk about UX without mentioning UI, or user interface. The two often get mixed up, or even lumped together as the same discipline.

There’s a great analogy to help explain the differences. Imagine the human body: the bones are the code, the UX is everything internal that makes the body function well, and UI is everything on the outside that makes the body look nice and appealing.

UI is focused on how a product looks and operates. This includes everything from designing the navigational flow of a website, to its visual design. UX however, takes that design and makes sure it resonates with users, based on the elements of the UX honeycomb.

Because the two interact so closely with each other and are often misunderstood, many organizations lose the benefit of having dedicated practitioners in each field—something many UX professionals believe is a necessity for great UX.

The Future of UX

The good news is that UX is here to stay. Organizations have started to realize how important their customer’s impressions are of their brands, and they know designing a great experience is the best way to build trust and loyalty. Additionally, as the standards for good UX continue to grow, users are getting used to better experiences and becoming less tolerant of bad ones.

And that means the practice of UX is expanding. Initially, UX was focused on primarily digital experiences, but quickly branched out into the physical world as well. You may have also heard the term “customer experience” a lot too, and that’s another layer to consider.

The Definition of Customer Experience

Customer experience, or CX, includes every interaction a person has with an organization or brand. This includes customer service, physical environments, the products themselves, and of course, the digital experiences.

It’s no longer enough to have just a beautifully designed website. If your app and your brick and mortar presence aren’t equally as impressive, your customers will notice.

As a result, organizations are changing the way they think about UX and CX. Progressive companies are starting to integrate UX and CX practices, creating cross-functional teams that include professionals from marketing to sales, and even the executive suite.

Learning More About UX

As the topic of UX is becoming more popular, there are a lot of great resources out there to help you learn more. Whether you’re completely new to UX, or a marketer, or interested in transitioning into a UX researcher role, or you want to get certified, you’ll have plenty of options to help get you started.

The future looks bright for UX. Companies have realized the ROI of UX. Users have begun to expect better experiences and are rewarding the brands that provide them with their business. And talented practitioners are joining the ranks of UX professionals every day.

We’ve been obsessed with UX for a while now, but we’re excited to see so many others joining the party.

How to become a UX/UI designer when you know nothing ?


1. Understand the many fields that fall into “Design”

There are visual designers, interaction designers, user experience (ux) designers, user interface (ui) designers, product designers, graphic designers and the list goes on. Then there are generalists who do a little of everything! Companies like LinkedIn hire such designers for UX, UI and product design. Start by figuring out which specialty or specialties interest you.

2. Read UX/UI design articles during your commute

Start with “So you want to be a user experience designer,” by Whitney Hess. From there, check out “14 must reads for the ux newbie” then Medium’s collection of design posts In the beginning you’ll need to do a lot of reading and research before it starts to click.

3. Learn Sketch

Adobe Photoshop & Illustrator have long been a Designer’s go-to tools, but these day’s there’s a new kid on the block named Sketch. With an extremely intuitive interface, Sketch has done a great job combining all the good parts of Adobe. There are a number of resources that will help you learn these programs, but a few of my favorites are Design tuts, Lynda and Skillshare.

4. Take a break when you’ve hit a wall

At this stage you’ll be somewhere in-between confused, defeated and overwhelmed – so buy yourself a latte for goodness sake! Reward yourself for all the hard work you’ve put into your passion. Stay positive.

I fondly look back on the day I embarrassingly admit to a friend that I had absolutely no clue how to use the pen tool (this will be funny in a few months). My friend and I ended up getting jobs at the same company a year later and still laugh about the day we spent, quite literally, 8 hours drawing shapes in Photoshop.

5. Read the good stuff

Great books for designers to read in 2016

6. Find a designer who knows some stuff, and text them occasionally

I didn’t say “find a mentor.” I don’t believe in mentors because I think people are busy working towards their own dreams. I have never expected someone else to invest heavily in my career, but I have found some awesome Designer friends who I bug on the occasion with a simple text or a quick coffee when I need advice.

7. Spend time getting inspired

Listen to Matias Duarte, VP of Android Design at Google talk about Material Design.

Look at design work on Dribbble, The Best Designs and Awwwards. Make inspiration a priority. It will help you understand ux patterns, visual design, and it will energize you.

8. Work on fake projects

If your goal is an internship or entry-level position as a UI/UX Designer, you will need something to show. This is one of the hardest steps because it feels a little like jumping off a cliff. You won’t think you’re ready to start working on fake projects, but do it anyway. Try designing a portfolio in Sketch or Illustrator starting with user flows, wireframes, interactions, and finally a high-fidelity mock. After that, redesign a site in need of a redesign (Pinterest is perfect, don’t touch it!). Invent your own to-do list web app. Create a froyo delivery app. Continue to design things that excite you.

9. Subscribe to Sidebar

The 5 best design links, emailed daily:

10. Write this quote down and keep it at your desk

“Nobody tells this to people who are beginners, I wish someone told me. All of us who do creative work, we get into it because we have good taste. But there is this gap. For the first couple years you make stuff, it’s just not that good. It’s trying to be good, it has potential, but it’s not. But your taste, the thing that got you into the game, is still killer. And your taste is why your work disappoints you. A lot of people never get past this phase, they quit. Most people I know who do interesting, creative work went through years of this. We know our work doesn’t have this special thing that we want it to have. We all go through this. And if you are just starting out or you are still in this phase, you gotta know its normal and the most important thing you can do is do a lot of work.”


User Experience with Storytelling

Stories have defined our world. They have been with us since the dawn of communication, from cave walls to the tall tales recounted around fires. They have continued to evolve with their purpose remaining the same; To entertain, to share common experiences, to teach, and to pass on traditions.
Today we communicate a bit differently. Our information is fragmented across various mass-media channels and delivered through ever-changing technology. It has become watered down, cloned, and is churned out quickly in 140-character blurbs. We’ve lost that personal touch where we find an emotional connection that makes us care.

Using storytelling, however, we can pull these fragments together into a common thread. We can connect as real people, not just computers. In this article we’ll explore how user experience professionals and designers are using storytelling to create compelling experiences that build human connections.
It Begins with a Story 
In 1977, a simple story set the film industry on its side. The special effects technology used to create this story had not been created or used in filmmaking at the time of its writing. The author disregarded what was popular and marketable at the time (apocalyptic and disaster movies) to create his own vision. The film starred unknown actors and the genre had mainly been seen in 1930s serial movies. It was turned down by many film studios and at one point was almost shelved.


The movie, if you haven’t guessed, was Star Wars. The author was George Lucas. Star Wars went on to become one of the most successful films of all time and turned into a pop culture phenomenon. It gave birth to the blockbuster and the trilogy, and completely changed the way movies with special effects were made. Many of today’s most influential film companies were spawned from the success of these movies: LucasFilm, THX, Industrial Light & Magic (ILM), and Pixar.
Star Wars wasn’t a new story though. It drew from mythic archetypes of stories told over thousands of years.