Tag Archives: interaction design

User Interface – Interaction Design Methods

Interface Design Logic

Based on the feedback we received from the interviews we conducted from various stakeholders of the project there have been 3 main ideas that have governed the interface design logic. The layout, colours and typography are representatives of the following core ideas:

  • 1. Interface Efficiency – One of the premier reason’s our competitors haven’t succeed with an idea similar to this is because their interface lacked efficiency. Far too many clicks and round about navigation is required to achieve simple tasks. While designing this interface we have adopted a goal, not task, oriented approach. People want it done with few clicks, and fast.
  • 2. Inclusive Design – With a growing number of people of old age and with visual disabilities it was crucial to create an interface that would allow ease of access to as many as possible. Clear navigation, heavy contrast, large fonts and clarity are all elements of the interface design logic we adopted.
  • 3. Ubiquitous Design – This service will be accessed not just from desktops. This service will be accessed from laptops, desktops, ipads, iphones, android phones and tablets. Estonia is a country that is showing early signs of an age of Ubiquitous Computing and we wanted to create a user interface with this future proof design thinking.

Desktop Website Homepage – User Interface Prototype

This is the desktop version of the website homepage will we quick and easy to load. The

User Interface Prototype
Clean design with beautiful large fonts that are meant for easy viewing. A home page without banners, unnecessary scripts or heavy image use makes the website quick to load.

App Landing Page / Mobile Website – User Interface Prototype

user interface prototype
Landing page / App home screen with a direct call to action search bar and an intuitive scroll down indication.

On Scroll Down

User interface prototype
Quick access to adding a product. Large button/icon indicators with a heavy contrast that reduce cognitive efforts thereby making the process of uploading faster.

Forms – User Interface Prototype

A clean and simple form design.

Large form with clear and readable fonts that make it intuitive for the user.
Large form with clear and readable fonts that make it intuitive for the user.

Upload Page – User Interface Prototype

This is mobile version of the product upload page.

user interface prototype
A two scroll product upload page with a clean form that makes it quick and easy for users to upload products.

Login / Register Page

This is the login/signup form.

user interface prototpe
A easy approach to registrations helping us prevent site drop outs.

The sign in / register form can be accessed from any part of the website/app.

User Interface Prototype
A smart approach to creating an site wide omnipresent sign in / up pop-up, instead of a time consuming extra dedicated page.

Product Page – Use Interface Prototype

This is the iPad landscape view.

User Interface Prototype
A nice flat design that does not tax the user’s eyes or crave for his attention. Interface Design with a focus on content beautification.

Product Listing / Search Result Page – User Interface Prototype

User Interface Prototype
Easy filter that make the users life simple. Quick information dissemination through nicely arranged boxes of content.

Thank You / Aitäh!


Testing Tasks, User Stories and Paper Prototype

At the moment, we are trying to focus on the three of the most important tasks for this project.

Task 1: Uploading a Product

In this task, the user (‘giver’) is trying to list his product and connect with a potential ‘takers’ of the product. This is done by ‘uploading a product’.

Testing Tasks, User Stories and Paper Prototype

Step 1: The user clicks on the “upload product” button on the app or the website.

2.1 Product Screen with Add Image

Step 2: The user add images through gallery or camera.

Testing Tasks, User Stories and Paper Prototype

Step 3: The user then adds product information: Item Name, Description, Category and Tags (optional). The user then adds Pick Up Information: Date (from picker) (to picker), Time (from picker) to picker), City and Additional Information (optional).

Testing Tasks, User Stories and Paper Prototype
Testing Tasks, User Stories and Paper Prototype

Step 4: The user then sees the success page. He can then add more products, search for products to take and look for people who to connect with who wish the product he just uploaded

Task 2 and 3: Searching for a Product and Booking it

In this task the user first searches for a product he/she needs. After browsing and filtering through products the user needs to submit a request to book product.

Testing Tasks, User Stories and Paper Prototype
Step 1: The user clicks on the “Search” button/bar.

Testing Tasks, User Stories and Paper Prototype

Step 2: The user enters his query, hits enter and waits for results.

Testing Tasks, User Stories and Paper Prototype

Step 3: The results appear below. They can filtered by location and Category

Testing Tasks, User Stories and Paper Prototype

Step 4: The user then clicks on a product and sees further details.

Testing Tasks, User Stories and Paper Prototype

Step 5: He then clicks on the Submit button to request the product. The user then sees a message asking for confirmation if the user agrees to give his contact information to the giver of the product.

Book Review: The Design of Everyday Things by Donald Norman

by Jinesh Parekh,
Masters in Human Computer Interaction (Student)

The design of everyday things - Donald Norman

Overview: About the book and the Author

After reading ‘The Design of Everyday Things’ I have come to believe that it wouldn’t be an exaggeration when people address Donald Norman man as the father of usability and design. Published in 1988, ‘The Design of Everyday Things’ has revolutionized the functioning of several industries, businesses and scientific disciplines like industrial design, user interface design, user experience, interaction design and of course human computer interaction.

A bible for designers, developers, innovators and project managers? I have been thoroughly impressed by this Donald Norman’s work and his ideologies on design. It’s been pointed out over and over again in this book that good design can be the solution. The book illustrates several different examples of how good design can be a game changer for many organizations and how bad design can completely murder the effectiveness (and usability) of a product no matter how sound the science is behind the workings of the product. What makes Norman’s work extraordinary is his easy-go styled narration and sharp observations on the psychology of usage. He provides a deep insight on how people use everyday objects. The ‘end user’ and his/her experience is made the center of focus in his study. He talks about the different emotions felt and the experiences gained by the user while operating everyday devices.

There are many designers around the world that have read this book. After all, it’s been in circulation for over 24 years and is still far ahead of its time. The book was written in 1988 and I strongly believe that the designers who implemented the learnings from this book have created better products, services and experiences for users around the world. Donald Norman is a visionary and any person who loves creative thinking will enjoy reading this book.

Ideologies and Learning: Lessons learned from this book

As mentioned before, the central focus of this book is the user and how everyday objects should be designed in way that it is easy to learn, easy to use and is functionally fast. Norman does this by emphasizing on the psychology of tasks and actions. He fruitfully manages to make designers change their ‘task oriented philosophy’ to a ‘goal oriented philosophy’. Objects are used to achieve goals, not tasks – he points out. This marks a substantial shift in philosophy of design – no matter how experienced or new the designer may be, it makes him/her reconsider the style, method and process of design.

“Design is really an act of communication, which means having a deep understanding of the person with whom the designer is communicating.”

– Donald Norman
He explains that a designer should aim to the correct mental model of how a user would behave to achieve his goals through a series of actions and how it can be done if the design has the right amount visibility, affordances and constraints. To put it simply, affordances are what functionalities or actions the design should/can offer to the user and constraints are what functionalities or actions the design should not / can’t offer the user.

The book contains a series of scientific-psychological study references presented in a short, precise and easy to understand manner. Two such exquisitely explained phenomenon, that I thoroughly enjoyed reading the most, are the structures and workings of (short term and long term) memory within the brain and the function of knowledge that could be embedded within the brain, a design or in the environment. Prior to this book, designers never accounted for this – which is why most them did not know how human beings use knowledge and memory in accomplishing simple tasks. This is reason why we have bulky manuals. To Norman, manuals and instructions kill usability.

“Any time you see signs or labels added to a device, it is an indication of bad design: a simple lock should not require instructions.”

― Donald A. Norman
The design itself should signal the appropriate actions. He repetitively signifies the importance of how intuitive designs, that do NOT require special efforts to perform tasks, lead to the success of the artifact and how it distresses the user. This is imperative in understanding how a good piece of equipment needs to be designed. Personally, I would love to see a world without manuals.

He fundamentally inspects how often and why users feel confusion, anger, frustration, guilt or shame simply by their inability to use or learn how to use a particular device. He eases the reader, through systematic explanations and examples, by telling them that it’s only human to make mistakes and their inability of usage arises from poor design decisions made by the designer/manufacturer and not due to a fault of their learning capacity. According to Norman, devices can be made easy to use or learn if the designer follows a few simple design strategies at the stage of development. The most important strategy of this sort such is: Good Design = Natural Mapping (i.e. account for all possible user actions/goals and errors) + Natural Design/Interface. He mentions that users crave for visibility of crucial elements, simplicity in use and appropriate feedback after every action they take in the design of their product or service.

“Principles of design:
1. Use both knowledge in the world and knowledge in the head.
2. Simplify the structure of tasks.
3. Make things visible: bridge gulfs between Execution and Evaluation.
4. Get the mappings right.
5. Exploit the power of constraints.
6. Design for error.
7. When all else fails, standardize.”

― Donald A. Norman, The Design of Everyday Things

He urges people (his readers) to test products before buying them and keep usability an important criteria for purchase. This makes sense. Most of the times, when we buy things, we look at the price, features or the quality of the product in our mind while making our purchase decision. Keeping ease of everyday use in mind while buying a product would not only change the way we buy products it would also force manufacturers to rethink their designs. The cumulative effect of this approach could do wonders to the world.

Criticisms

I cannot think of any complaints or criticisms from this book. I enjoyed reading it thoroughly. The book has had several revisions and it seems that Norman has really gone through a lot of trouble to make sure readers from any background can understand this book. However, for experts within the field of design, usability engineering or psychology – the examples and illustrations in the book may seem a bit repetitive. A colleague of mine, who has also read this book, mentioned –

“I like this book but after a while I just quickly browse through some of the paragraphs like it’s a magazine article without paying much attention to the illustrations or examples. I understand what he is saying and I don’t need so many examples to get his message. The entire book could be made more concise!”

Conclusion: How can this book help you?

It doesn’t matter if you are an experimental scientist or an electrical engineer, a computer programmer or telephone operator, an entrepreneur or a software designer, this book is highly recommended for individuals who appreciate forward thinking, creativity and logic. The applications of the knowledge/lessons derived from this book are endless. The ideas presented in this book 24 years back are now being used (or under development process).

With numerous well explained examples he really makes the reader re-think the world. It certainly made me rethink the way I interact with everyday objects like tea-makers, ovens, maps, laptops, elevators, phones etc. From opening locks to your door to using a calculator for making some calculations, from switching the radio on your car to listen to music to handling a projector to make presentations, this book will create a storm of thoughts and will make you change the way you have interacted with objects and the emotions you must have felt while doing so.

The Human Processor Model & Fitts Law

Fitts Law
Click on this image to view it in full size

Self Notes:

FITT’S LAW:

This tool is probably one of the best ways to learn the fundamentals of Fitt’s law. It’s a fantastic way to understand the different variables that make up this law.

The Fitt’s law depends on 3 factors:

  • T is the average time taken to complete the movement.
  • D is the distance from the starting point to the target’s center.
  • W is the width of the target (measured along the axis of motion).

What are the implications of this?

  • While designing a UI, the designer needs to makes sure the buttons are large enough and close proximity for the action to be completed quickly.
  • If the actionable object has been put far away, it would be important to compensate it by making the object larger.
  • It helps us determine which is the best pointing device that be used in order to achieve tasks quickly and efficiently.
  • While we are using pointers – the edge of the screens are the easiest to target. This is because they have infinite width and height. While designing a UI, if the user needs quick access to something, one should make sure that  the quick access icons/menus should be towards the edges for quick access.
  • Although the right click menu is effective – the pie menu can be more effective than the right click menu.
  • The pixel you are pointing at is the easiest to click. But the corners of the screen are almost as easy to point.

Disadvantages of FITTs Law:

  • Predicts only one dimensional movement. Doesn’t account for z axis.
  • Absence of a consistent technique to deal with errors
THE HUMAN PROCESSOR MODEL:

Is an attempt to understand the goals of task analysis, calculation and approximation. It enables us to predict user performance to a certain degree.
The model works on two principles:

  1. Set of processors, memories and their interconnection
  2. Set of principles of operation

Once complete, the calculations can then be used to determine the probability of a user remembering an item that may have been encountered in the process. The probability could then be used to determine whether or not a user would be likely to recall an important piece of information they were presented with while doing an activity.

Factors affecting the Principles of Operation:

  • P1: Variable Perceptual Processor Rate Principle: The Perceptual Processor Cycle Time varies inversely with stimulus intensity i.e. Th Perceptual Processor Cycle Time will be lesser if the stimulus intensity will be high and vice-versa.
  • P2: Encoding Specificity Principle: Specific encoding operations performed on what is perceived determine what is stored, and what is stored determines what retrieval cues are effective in providing access to what is stored. The principle states that memory is most effective when information available at encoding is also present at retrieval.
  • P3: Discrimination Principle: The difficulty of memory retrieval is determined by candidates that exist in the memory, relative to retrieval cues.
  • P4: Variable Cognitive Processor Rate: The cognitive processor cycle time is shorter for greater task demands and increased information loads; it also diminishes with practice
  • P5: Fitts Law: The time (t) to move the size of the target (s) which lies at a distance (d).
  • P6: Power Law of Practice: The power law of practice states that the logarithm of the reaction time for a particular task decreases linearly with the logarithm of the number of practice trials taken.
  • P7: The uncertainty Principle: Decision time increases with uncertainty of decision or judgement to be made.
  • P8: Rationality Principle: A person acts to attain his goals through rational actions, given the structure of the tasks and his inputs of information and bounded by his limitations on his knowledge and processing ability. Goal + Task + Operators + Input + Knowledge + Process Limit  = Behaviours
  • P9: The Problem Space Principle: The rational activity in which people engage to solve a problem can be described in terms of 1) a set state of knowledge, 2) operators for changing one state to another, 3) constraints on operator movement and 4) control knowledge for deciding which operator to apply next.

Some applications of CMN Model:

  • Moving Picture Rate
  • Determining Perceptual Causality
  • Reading Rate
  • Reaching a button