Tag Archives: User Experience

User Interface Design

The Trick of Designing User Interfaces that Slay!

Very often at work, I used to get bombarded with user-interface related questions. Some of those would be ones I would be hunting tangible answers for myself. Typical ones would be:

“Does this website look good?”
“Which interface looks better?”
“Should I place the button to the left or to the right?”
“Do I keep the logo Green or Red?”

Now, the problem every time was the expectation to offer perfect answers, along with supporting reasons. Although my intuition helped me get through on a few, the part I would struggle most was in offering convincing reasons to support my answers. I felt my supposed intuition had some underlying logic and concepts but I needed to reify those. I needed to have constructs that  I could use to easily judge any Design, be it a web page, mobile application UI or even a poster.

What followed was a lot of google search, expert advice seeking and directionless research. Finally, I came across a course based on Design Thinking which paved the way to a whole new perspective of looking at any design.

I now use a personal knowledge kit, heuristics of sorts, that I have been able to develop, courtesy this course, which helps me analyze any User Interface. If you are facing similar problems, this blog should be of help. So here are the points: 

……………………………………………………………………………………………………

1. Evaluate your Work

Before making an Interface public, make an evaluation yourself by asking these questions:

How easily can someone

  • Determine the function of the system and possibilities?
  • Determine the mapping from the intention of the user to actual operation?
  • Perform the action?
  • Tell the state of the system? Tell if the desired action has been completed or not?
  • Determine the mapping from the state in which the system is into what the user understands?

If all the questions have already been addressed in your design, then you’re good to go. If not, then you need to enhance one or some of the aspects listed below to make the User Interface better i.e. providing

  • Visibility and Feedback
  • Consistency
  • Non-destructive operations (undo)
  • Discoverability (menus)
  • Reliability
  • And events should not happen randomly

All these points sum up to nothing but an implementation of the following statement
Immediate feedback on actions AND Continuous representations of objects” – This is what lies at the core of the best designs that are made.

2. Understanding Mental Models

Even before a user starts performing an action, a mental image is formed in the user’s mind which depicts the user’s understanding of the Interface, which is called the Mental model. Very often a user thinks something and the system does something else, which leads to this gap between the mental model of the user and the designer.

This can be overcome by experimenting with multiple beta users and analyzing how your interface performs. Additionally, through our Interface, we can provide a good idea of how each object works and how to control it leading to the Interface itself disclosing how it is used.

3. Representation Matters

This lays emphasis on just one thing –  What to show and What not to.
Representation plays a significant role in simplifying or complicating matters, and so, a Good Representation shows all of the relevant information, and nothing else.

Use pictures where words seem monotonous. As the saying goes, ‘A picture is worth a 1000 words’, the same principle can be used to build great interfaces. It takes time for the user to read and make a mental image and then process the information. This time can be cut out be using images directly and where ever they can be in the UI. Icons facilitate visual recognition and come handy when you know what something looks like but not what it’s called.

Some other factors that are often ignored are Whitespaces and Contrasts. Important information can be delineated by smart use of spaces and contrasts.

4. Typography

Typography is defined as “The art and technique of arranging type to make written language legible, readable, and appealing when displayed”

Something to be aware of when working with text-based applications is the Serif Hypothesis, which states that “Serif is easier to read as the letters contain anchors and tails which provide comfort to human eyes while reading texts for extended duration of time”

So, if you have a lot of written content on your webpage, you now know which text format to consider.

5. Layout

Every UI is designed with Grids in Mind. For example, have a look at the pictures below :

Paytm Home Page
Paytm Home Page

Yahoo Home PageYahoo Home Page

Things to be kept in mind are :

  • Alignment guides the eye and so we should avoid glitches there.
  • We automatically and unconsciously notice patterns/deviations that fall out of place.
  • That is why it is very important that we stick to mathematically accurate patterns.
  • In case we decide to deviate from a pattern, it has to be strategical.
  • Use visual proximity and scale to convey semantic information

6. Color

Effective use of colors can enhance the user experience to a great level. Colors can be used to highlight essential elements on the screen or to direct user attention.

Now, each color is associated with a certain meaning that has been proven over the years in various studies. The emotions that various colors invoke are as follows:

  • Red — Symbolizes lust, power, excitement or love
  • Yellow – Competence and happiness
  • Green – Good taste, envy
  • Blue – Masculine, high competence, high quality corporate
  • Pink – Sophistication, sincerity, feminine
  • Purple – Royalty, authority, sophistication, power
  • Brown – Ruggedness, earthiness, toughness
  • Black – Grief, sophistication, expensive, fear, evil
  • White – Happiness, sincerity, purity

These are widely agreed notions that will not change anytime soon.

7. Positioning

Users automatically pay attention to certain elements basing on their position on the webpage. More often than not, they seem to define a trend in which a webpage is viewed.

Neilsen Norman Group came out with a heatmap after conducting research on human eye tracking on webpages.

The highly colored area shows the highest density of the user eye views. That is where most users looked at most of the time. This just means one thing to us: put the more important content in that high-density area.

Now let’s look at the simplified pattern for a web page: This image shows the optimum positioning of information on a webpage based on the level of importance.

Important stuff needs to be in Priority 1 blocks followed by others.
Credit: Poynter Institute www.poynter.org/extra/eyetrack2004

……………………………………………………………………………………………………

The views and opinions expressed in this article are those of the author. To know more about our company, please click on Mindfire Solutions. 

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Product Engineering

Product Engineering and User Experience process.

What is Product Engineering?

Product engineering is known as the process to develop or design, system or a device such that the product is treated as an item for sale or to be used by various people. When a product is being developed, there is a lot of work and technology involved in the development process. This overall process is called as product engineering. Product engineering is usually called as an activity dealing with issues of cost, reproducibility, quality, performance, reliability, serviceability and user features. If the process goes through a proper creative way the outcome is awesome.

The term product engineering is; developing the concept and the design of the product and development of its mechanical, electronics and software components. For example: developing a smartphone. Now-a-days smartphones are very popular in the market and a lot of new and old companies in the way of competition, give away better product feature to customers. A product like smartphone includes a set of different features like designing the body, it’s hardware components, packaging it in a small space, developing the electronics that controls the various components and lastly developing the software which will operate all the features of smartphone known as the Operating System.

Here are some skills taken care for product engineering process
– Product statistical methods and tools
– Hi-tech manufacturing process
– Product reliability and user research
– Computer-aided design and simulation programs
– Strong knowledge product platform which the product will use
– Strong analytic work methodology and problem solving skills

In software industry, the term Product Engineering is used as development process of a software or an application. From making of prototype to final release of the application process, it is called as product engineering of the application.

Product engineering of an application. Points that everyone should follow:
– Prototyping of the complete application. (Visual Concept)
– Structural designing or User Interface designing.
– UI or Front end development. (What browser or compiler will read?)
– Backed or functional development. (Through which user will carry out work.)
– End user testing and bug fixing.
– Final product delivery.
This depicts the entire process for a successful web, desktop or mobile app.

What is user experience?

User experience is combination of two words, “user” and “experience”. The experience of a user towards a product or an application is called as User Experience. UX or User Experience in other term can be explained as the emotion of a user when he/she uses it. It may be good or bad. The good experience of user towards a product plays a vital role in the product’s success.

Let me give you a simple example. “One day at night you came to know that you have to reach office early in the morning at 7AM the next day to attend a meeting. For that you set your alarm at 6AM and go to bed. When you wake up in the morning and see that it is already 6.30 AM and the alarm hasn’t rung. You found that, the alarm is off due to battery drain out. You rush to the coffee vending machine for a cup of coffee but only to find out that there is no coffee. You could trace out that the machine is not connected to the power source. In the process you have already lost some time.

Then you get ready for office in 10 mins. While going to office by your car you face a lot of traffic for some unexpected reason. Then you notice that you are running out of fuel. So, you have to drive to a nearby petrol pump only to find out that the petrol pump does not have a card swipe machine. You rush to a nearby ATM and withdraw money. Finally, after fighting out so many obstacles, you reach office only to find out that the lift you use to take daily to reach to 5th floor does not work. Then you are forced to take the stairs and when you reach you find that the meeting is over and your colleagues have started work.
If everything would have fallen in place, you would have never missed the meeting.

The software or system that misguides you and does not help you achieve your goal is an example of bad user experience. Example – Google mail is most popular web application than other mail client for its good user experience. I personally like Google+ than Facebook because of its user friendly features and faster response. Looks doesn’t matter in the process of user experience. Please look at the two images which is called Donald Norman (design and usability engineer) Coffee Mug.

User experience has a vital role in software product engineering. Deep user research is key to success for better user experience. Taxi for Sure – A Driver app developed by a start-up company in Bangalore is a very famous app for taxi drivers. People use it for daily for hiring taxis. This free mobile app is very popular due to its user experience.

Key concept for better user experience.
– Deep user research. Feel the user motion
– Minimal and clean design of application
– Less page loading time
– Quick navigation through the functionalities
– Readable typography
– Minimum page refresh
– Avoid long loading graphics
– Graphical representation of functionality, by which user can understand the function easily without reading long text description.
– End user testing with exact devices.

Happy Designing 🙂

 

 

 

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •