UX-designers target emotions to create a competitive advantage

Miklos Philips , a UX Designer @ Toptal, argues that designers have to cater for customer delight to create a competitive advantage and to promote growth. According to Donald Norman, author of The Design of Everyday Things, design is an act of communication; therefore, it requires a deep understanding of the person with whom the designer is communicating. If taken into account that companies are rewarded substantially when they connect with their customers’ emotions in a positive way, designers need to identify the powerful motivators that can help companies to create a competitive advantage.

Looking at the products around us, most of the designs speak to our emotions. We like or dislike it, we feel disillusioned or motivated when we use it, and we even love or hate certain colours. I will not buy an orange tool for my kitchen, even if it is better than it’s competitors. All designs ultimately produce an emotion, a fact incorporated in an old adage in the user-experience (UX) professionals world: “interaction with any product produces an experience (emotion) whether it had user experience or not.” All end products elicited an emotion from their audience; therefore, UX-designers are concerned with how an user interacts with and responds to an interface, service or product.

The response to a product or service or interface is regarded as an emotion; therefore, UX-designers do not only strive to design usable, functional products; they also strive to generate a certain emotional effect — usually a positive one — on a user while he or she uses the product. If the design is good, the response will be maintained throughout the user journey. Therefore, emotional design focuses on an interaction with the designed product that affects the user. In this article, I am using Philip’s guidelines to evaluate some of the products and interfaces I am using on a daily basis.

Approaches to designs

First, we need to look at some approaches to designing products, interfaces, and apps.

Utilitarianism

Functional design, or utilitarian design subscribes to the “form follows function” style prevalent since the early 20th century. This approach is based on the idea that the shape of an object or building should be based mainly on its function and purpose, and not on its aesthetic value. Current approaches to designing incorporates the aesthetic value to speak to the emotions of potential buyers of the products. (see the example from Philip’s article).

Brutalism

Philps refers to brutalism as the twin brother of utilitarianism. The form follows the function, but the product is also put together with the least amount of effort, the cheapest materials available and with zero regard to appearance or the human experience as can seen in the picture of a block of flats in one of the poor areas of the Western Cape, South Africa.

The flats are functional, but not pretty at all.

Aesthetics and Perceived Usability

Two Japanese researchers studied in the 1990’s two different layouts of controls for ATMs to invesigate if aesthetics affects perceived usability (Philips). The versions were identical in function, but the interfaces were not identical regarding their aesthetic value. The researchers found that the ones with attractive interfaces were perceived to be easier to use.

Philips argues that Braun, a very successful design and manufacturing company founded nearly a 100 years ago in Germany, is famous for its minimalist, elegant designs which captivated people since they are functional, but also simple, refined, good-looking and consequently a joy to use (see images below (Philips).

Utilitarian designs that are simply functional and feature-rich do not please people any longer. According to Tinker Hatfield, a shoe designer at Nike Nike basic designs are always functional but great designs will also say something to the potential users.

The Emotional Design Pyramid

Maslow (1943) postulated that human motivation is based on people seeking fulfillment and change through personal growth.  Based on his hierarchy of human needs, emotional design can be put on a pyramid that illustrates its importance (Philps).

People perceive functional and attractive things to work better than other things.  As illustrated in the Japanese ATM experiment, a product’s aesthetic value can affect its perceived usability. According to Philips products that include a pleasing aesthetic and anticipatory design can lead to such a degree of customer satisfaction, that minor frustrations and imperfections with those products will be forgiven.

During the 1990’s and early 2000’s Blackberry took South Africa by storm. The phones were not good-looking, but the free BBM function made up for an ugly design due to the high cost of Internet access in South Africa. And then Blackberry took the BBM function away, leaving potential buyers with the opportunity to choose any other phone. Currently, iPhone’s, LG’s, Sony’s and Samsung’s are the phone of choice, based on their people-pleasing slick designs (image Philips).

Emotions and The Brain

According to Philips, negative experiences focus the brain on what’s wrong; they narrow the thought process and make people anxious and tense. We feel restricted and frustrated if a website or an App is badly designed and doesn’t perform to expectations. In fact, this feeling can grow into a form of anger known as computer rage. Computer rage races our pulse-rates, forces us to click away from irritating sites and to delete Apps in frustration. When design goes wrong, extreme emotions can be produced.

Good emotional design elicits pleasure and a sense of security and safety (Philips). Until 1998, all PC boxes were white, and then Apple released translucent, candy-colored iMacs that signaled more than a renaissance for Apple; it sparked a widespread industrial design revolution since it found the sweet spot (image from Philips).

Steve Jobs, the CEO of Apple Computer,  stated that design is much more that what a product looks and feels like, it needs to work well as well.  According to Bruce Claxton, Professor, Design Management at Savannah College of Art and Design, we seek out products that are not just simple to use but also a joy to use. In this regard, my Dell Inspiron 13, from the 7000 series serves as an excellent example.

Many manufacturers offers tablets (iPads) and computer, but Dell integrated a computer and a tablet to improve usability and user experience. Although I love my Apple products, they are not user-friendly in airplanes and when I work in bed. The screen of my Dell folds further back and can even be folded all the way back to change my computer in a tablet (see figure below).

From Passive to Interactive

Not long ago, the objects around us were mostly “dumb,” passive, one-way machines due to a lack of an interactive relationship.

My mixer could not talk back, but my new Thermomix machine can, a feature that allows me to form an emotional relationship with her. The interactive, chip operated Thermomix asks me if I want to see a recently used recipe or the interactive cooking book.

She also warns me when the lid is not inserted, and when a speed is insufficient due to the temperature of the liquid in the bowl.

My Apple watch reminds me to stand up and walk for one minute, a feature that can save my life since I forget to do it when I am working on my computer. Only when my legs cramps I realise that I have dismissed the haptic of my watch and sat for more than an hour in a certain position.

According to Philips such interactions cause an emotional relationship with our “machines” which give a rise to anthropomorphism or the tendency to project intentions, human qualities, behaviors, emotions, and character traits onto objects. If the product works well, we feel satisfied and altogether delighted because it puts what we were looking for at our fingertips at the perfectly right moment.

However, the relationships with ‘things’ can also cause a potential for negative emotions to kick in when ‘the thing’ is not doing what we want it to do. In such cases, we feel frustrated and not in control. Annoyance and irritation may arise with the possibility of escalation into anger if the aggravation persists. Therefore, good designs should be accompanied with excellent guides and help features to reduce the buid-up of negative feelings.

Guidelines for an emotional approach to designs

User-experience strategies need to include designing for emotion (Philips). They can use the power of user research and product testing to effectively set up and gauge the emotional impact of their designs. User-testing, deep research and subsequent touch-point mapping that identifies pain points, can afford designers with opportunities to identify the frustrations users may encounter while using the product. Designers should  strive to eliminate these frustrations, but they should also find opportunities to bring customers pleasure by changing critical moments into positive emotional experiences.

Three levels of design: Visceral > Behavioral > Reflective

Designs needs to work extremely well on three levels, namely, visceral, behavioral and reflective (See Don Norman’s seminal book on “Emotional Design.”).

Visceral level

First impressions are most important; therefore, the design can be regarded as effective when the potential user’s first response is that they want the product. This immediate, deep-level, positive, and instinctual gut reaction to a product’s design can create a competitive advantage. Visceral design also affects the perception of a product’s credibility, trustworthiness, quality, appeal, and even perceived ease of use. My first impression was that the Apple watch is fun, exciting, tough, speedy, uncompromising, but also intimidating.

Behavioral level
First and foremost products must work well for people, thereby contributing to its users’ satisfaction. Behavioral design focus on how the product or system, as evaluated by the potential users, meet their requirements and needs. It refers to pleasure associated with effectiveness. If users perceive it as something they can master and which makes them feel smart; they will buy it. Therefore, it has to feel good, look good and perform well. If it doesn’t work as advertised, it gives rise to an immediately negative emotion. Up to date, the only problem I have with my watch is that the heart rate monitor was troublesome (See figure).
After Googling the problem, I knew that I had to fit it tighter to my arm during exercises. Behavioral design also impacts the lifetime of apps on my iPhone and subsequently my Apple watch.
According to Philps, behavioral design is most important when apps are designed since 77 percent of users never use an app again 72 hours after installing it. As a result of good behavioral design, some apps are used on a regular basis and we can’t imagine being without them (Images from Philips)

Reflective design
 Buying and using products creates a sense of status in society, it’s about socioeconomic status. It’s about self-image, personal satisfaction, memories, reflecting back on the experience; therefore, beauty is a desirable feature of the products we buy (Philips). I want to know that it is beautiful, a pleasure to use, and can make my life easier, but I also want to know that I look good when I use it, drive it, and wear it. In this regard, I believe my Apple Watch speaks of good reflective design.

 

I can “bond” with this product, the design contributes to the perception of improved performance and quality (attractive things work better) and the perception of pleasure. I do not have to dig into my handbag when my phone rings, I can answer a call by using my watch. Furthermore, this accessory ensure that I exercise on a daily basis. The ability to change the face to suit my emotions distinct this product from a functional design.

Apple strive to form an emotional bond between the brand and the consumers by designing products that interact with one another. Brands spend millions every year to renew that connection; therefore, designers need to strive for the same emotional connection if their products are to be meaningful and successful. Designers should try to give products a “personality”; something that resembles the real world and brings pleasure and fun to the interaction to persuade them to buy and use the product.

Digital designs are a moment-by-moment effect “in the flow”, but they also operate on these three levels in the brain, namely, visceral, behavioral and reflective (Philips). It is important to note that there is a delay between these levels: first it’s visceral, second it’s behavioral and lastly reflective.

The World is in Motion

More and more designers use animated micro-interactions and screen transformations to make them seem “alive.” The world around us is in motion, flowing and fluid;and these designs mimic the real-world to allow users to form a more human-like relationship with digital products via anthropomorphism. These animated designs speak to our emotions as Philips illustrated with the following examples:

Example 1: Jewelry store e-commerce concept by Tubik (Dribbble)

Example 2: Bluetooth pairing sequence by InFullMobile (Dribbble)

Example 3: E-commerce store concept by Remco Bakker (Dribbble).

Final Words

Currently the focus is on functional beauty and emotional dimension of products (Philips). It’s no longer enough to design a functional and useful products or interfaces. Almost anyone can create functional and feature-rich everyday consumer products. To stand out in this crowd, designers need to have a deep understanding of the customer’s motivations and behavior to enable them to translate these  into effective emotional design that is elegant, beautiful and truly unique. Only then they will be able to design products and interfaces that create competitive advantage and promote growth.

(50 visits)

Simple game creation tools

Start by using simple game development tools. The following tools are easy to use and visually appealing. Some of the following tools are WYSIWYG platforms allowing you to click and figure out through logic and not through coding. Others are technologies that can be used to create games.

Sploder is a web-based tool that contains five sub-tools, each dedicated to create a different game type, namely Retro arcade, Platformers. Physics puzzle, Classic shooter and 3D adventure. There is also a graphics editor for creating your own art. Yoy can create various levels, place items throughot the levels and control enemies. If you want to save your games, you will need to create a free account. You can share your game so that others can discover and play with them.

Screen Shot 2016-06-05 at 7.08.02 PM

 

Gamesalad: It can be used to teach Computer Science students to build games. The drag and drop behavious can make a game come to life. You can load art, effects, music and info in the game. Games are played using one click. The basic version is free of charge and loads easily on Mac and Windows computers.

Screen Shot 2016-06-05 at 6.59.31 PM

 

GameMaker This studio says that it is really easy to use. They have streamlined the development process and provide all the resources, therefore the sky seems to be the limit. It should also be downloaded to your own computer. You can use the drag-and-drop feature or you can use the built-in scripting language. It is compatible with iOS and Android and executable compatible with Windows. It is more difficult than Sploder. It is supported by community tutorials. Popular games made with this tools is Spelunky and Hotline Miami.

Screen Shot 2016-06-05 at 7.02.33 PM

 

Stencyl is also for beginners and does not use code. It relates to Scratch and use a lego-like approach. It is most used for puzzles and sprite-based games. Popular games build with Stencyl is Impossible Pixel and Zuki’s Quest. It supports almost all platforms and have to be downloaded.

Screen Shot 2016-06-05 at 7.35.38 PM

 

Twine is very simple and allows you to create interactive, nonlinear stories. The free version is not powerful, but you can do a lot with it. Popular games created with Twine include A Kiss and Cry$stal Warrort Ke$ha.

Construct2 makes it easy by abstracting some of the concepts outwards. It is designed specifically for 2D games and allows anybody to build games. You just need drag-and-drop entities into a level, then ads events and behaviours to each entity. It is intuitive and absolute beginners will find it a tool to be used to create games. You can export to various platforms, even into Facebook. Tutorials and manuals are available on the website. You can buy more advanced versions of this tool.

Screen Shot 2016-06-05 at 7.17.15 PM

 

Unity3D is supported by almost all platforms. You can build 2D and 3D games. It can be deplyed to mre platforms with a click. It is intuitive for beginners and games are typically divided into scenes, each scene containing multiple game objects. Each object can have a number of scripts determining behaviour. The assets store is most useful and you can purchase models, animations, scripts, tools, and systems to import in your project. You can buy more advanced versions of this tool. Popular games created via this tool include Alto’s adventure, Gone Home and Firewatch.

Screen Shot 2016-06-05 at 7.26.15 PM

 

Cocos2D is an open source tool for creating 2D games. You will need to learn programming language, but it is easy to use. Games created with this tool include Badland.

Screen Shot 2016-06-05 at 7.47.21 PM

Unreal development kit is primarily developed for first-person actions, specifically first-person shooters. It can be modified to create other types of games as well. If you want to sell your games, you have to buy the more expensive versions. The tutorials are good.

Screen Shot 2016-06-05 at 7.31.16 PM

 

Unreal engine is for advanced developers. It provide a complete suite of game development tools and provide everything you need to start, grow and stand out from the crowd. It is new, but Daylight and Tekken 7 have been created on this tool.

Screen Shot 2016-06-05 at 7.50.49 PM

 

Microsoft PowerPoint can be used to create digital versions of board games with moveable pieces on a background image, that is the board. Such a game can be projected so that the whole class can participate, or smaller groups can play using one computer each. See these videos for ideas.

or this one

or this one

 

Please feel free to leave a comment. Please like it if it was found useful.

(21 visits)

Free tools to create Infographics

The following tools can be used to create infographics:

Wordle, can be used to create ‘word clouds’ from the texts that you provide. The more frequently word are used in the source text, the greater prominence it will have in the infograph. You can tweak the clouds by changing the font, layout, and colour scheme.

Screen Shot 2016-06-05 at 1.29.41 PM

 

Venngage is used by people who work with data and who want to communicate their data, improve insights and use the data to make decisions. You can use templates or create your own infographics, reports, posters, promotions and social infographics. Various levels indicate expertise needed to create an infographic.

Screen Shot 2016-06-05 at 1.44.42 PM

 

Tableau Public brings data to life, easy to use and spectacular powerful. a free trail version is available. You can download the software or use an online version (your site). You can invite others to collaborate.

Screen Shot 2016-06-05 at 1.54.57 PM

 

Infogr.am is free, easy t use and can be used to create infographics and interactive online charts.

 

Screen Shot 2016-06-05 at 2.10.05 PM

 

Google Charts can be used to display data on your site. It is powerful, easy to use and free.

Screen Shot 2016-06-05 at 2.13.17 PM

 

Gapminder is used to build fact-based worldviews. It can be downloaded to your computer to allow you to show animated statistics offline. It automatically updates when new data is available.

Screen Shot 2016-06-05 at 2.19.24 PM

 

Easelly can be used to create and share visual ideas. There are 1000’s of reporting, timeline, resume and process templates to choose from. This example is available on the website.

Screen Shot 2016-06-05 at 2.22.23 PM

 

Dipity is a free timeline website. Th mission is to organise the web’s content by data and time. Uers can create, share, embed and collaborate on interactive, visually engaging timelines that integrate video, audio, text, images, links, social media, location and date stamps. Dipity is for newspapers, journalists, celebrities, organisations, politicians, universities, etc. Timelines is a great way to increase traffic on websites and to engage users. It is a fast and easy way to bring history alive. This example is available on their website.

Screen Shot 2016-06-05 at 2.26.08 PM

 

Chartsbin allows users to create interactive maps. With chartsbin you can export maps as images, embed maps in own blogs and websites, specify different zoom levels and positions, project the maps, and many more. Example was available on their website.

Screen Shot 2016-06-05 at 2.32.48 PM

 

Amcharts allows users to create charts online. You paste the code into HTML pages afterwards.

Screen Shot 2016-06-05 at 2.37.17 PM

 

Feel free to comment by adding ideas for more infographic tools that can be used free of charge. I have added a few with free trials as well.

Please like if you found this post worthwhile.

(163 visits)

Trello 02: Explore your welcome board

The welcome board introduce you to various functions of Trello and consists of three lists, namely Basics, Intermediate and Advanced.

Screen Shot 2016-06-05 at 7.21.45 AM

So, let us try it out.

  • Go to the first lis (Basics)
  • Hover over ‘Welcome to Trello!’ (the first card)

Screen Shot 2016-06-05 at 7.30.11 AM

  • Click on the pen

Screen Shot 2016-06-05 at 7.32.02 AM

  • Change to ‘Welcome to my board.’

Screen Shot 2016-06-05 at 7.32.58 AM

  •  You have edited the first card.

You will see that you can edit much more than the name of the card. You can also:

  • Edit the labels
  • Change members who have access to the card
  • Move the card
  • Copy the card
  • Change the due date
  • Archive the card

I will look at each of these functions in follow-up tutorials.

  • Click on the card you have edited

Screen Shot 2016-06-05 at 7.41.51 AM

You can see the following information about your card:

  • The name (Welcome to my board)
  • The list (Basics)
  • The person who have added the card (Trello)
  • The date and time the card was posted (see under activity)

You can:

  • Add a comment
  • Members
  • Labels
  • Checklists
  • Due dates
  • Attachments

You can also:

  • Move the card
  • Copy the card
  • Subscribe to a card
  • Archive the card
  • Share it
  • Print it
  • Export it (JsON)
  • Link to the card
  • And send comments via an email link to be added to the card

I will create turtorials as I am using Trello. If you need help, feel free to ask by commenting on this post. Please like the tutorial to indicate its efficiency.

Have fun!

(25 visits)

Trello 01: How to create an account

To create a Trello account, follow these steps:

Go to http://trello.com and click on Sign Up – It’s Free

Screen Shot 2016-06-05 at 6.58.41 AM

Complete the form

Screen Shot 2016-06-05 at 6.59.52 AM

You will see a message requesting you to confirm your email address

Screen Shot 2016-06-05 at 7.01.00 AM

Go to your emails and click on verify email address

Screen Shot 2016-06-05 at 7.03.16 AM

 

Go back to Trello, and your clean slate is ready to be used.

Screen Shot 2016-06-05 at 7.04.48 AM

Have fun!

(14 visits)

Trello: teamwork made easy

Today, I am reporting on Trello, a technology used to enhance team work.

Screen Shot 2016-06-03 at 1.48.50 PM

Trello is based on a board system, with cards that can be dragged and dropped to show progress (image borrowed from http://trello.com).

Screen Shot 2016-06-03 at 1.49.28 PM

On a board, you can:

  • create several lists
  • add cards to a list
  • reorder cards (drag and drop)
  • drag and drop cards to another list to show progress, for example:
    • ideas
    • to do
    • doing
    • done.

Trello boards updates in real time, therefore you can see everything at a glance, in real time.

  • see the members who have access to the board
  • add members
  • follow the activities of the members

You can adopt Trello boards to fit your project, team or workflow.

I will create tutorials for using Trello. In mean time, you are welcome to request a tutorial. The tutorials will be numbered Trello 01, etc.

Tutorials

  1. Trello 01:  How to register an account.
  2. Trello 02:  How to create your first board

 

(23 visits)

Microsoft OneNote

Screen Shot 2016-05-23 at 12.48.44 AM
If you do a lot of note taking, attend multiple meetings, and collaborate with others on projects, OneNote might proof to be an effective tool. This app can be used almost anywhere: Mac, iOS, Android, Chrome, and Windows, but the Windows version offers more than the Mac version. One of the affordances exclusive to Windows is ‘ink to math’, a tool that converts hand written equations to text.

Tutorials for the following affordances will be designed in due course.

  • How to create multiple, colour-coded notebooks.
  • How to add sections to a notebook
  • How to add pages, with content, to sections
  • How to add screenshots
  • How to add web clips, receipts, images, videos, sketches (touch screen), etc.
  • How to add videos by pasting URL’s
  • How to create, open, share, and print notes (pages).
  • How to convert text in pictures to editable Word or Powerpoint files
  • How to search notes
  • How to integrate smartly with other Office products, such as Word, Excell and Powerpoint
  • How to embed files
  • How to give permission to edit documents
  • How to edit documents in OneNote
  • How to add comments
  • How to get access to notes
  • How to see who have signed into shared files
  • How to be notified on smart watches when notes are added or changed
  • How to use smartphones to shout notes

Need some help?

Please leave a comment.

(26 visits)