Last summer, I had started working on a project to develop an Offline Text Search Utility in Pharo. I was successful in building an application which retrieved correct search results from a collection of plain texts, a need for a good GUI of the application was felt. Hence, I along with my mentor eMBee have decided to work on enhancing the user interface of the desktop application sQuickBut before I start to work on it, I am reading more about (G)UI design and UX which I believe shall help me have a better perspective and assist in learning good design principles.

User-Interface.jpg

Simply put, in industrial design field of human–machine interaction, the user interface (UI) is the space where interactions between humans and machines occur.

The goal is to produce a UI which makes it easy (self-explanatory), efficient, and enjoyable (user-friendly) to operate a machine/application in the way which produces the desired result.

The design considerations applicable when creating UIs involve disciplines such as ergonomics and psychology.

With the increased use of personal computers the term UI is generally assumed to mean the Graphical UI, but it is not correct. User Interfaces may or may not be graphical. It could be:
            Command Line Interface (Here the user provides the input by typing a command string with the computer keyboard and the system provides output by printing text on the computer monitor)
            Graphical User Interface (It allows users to interact with programs in more ways than typing such as computers, hand-held devices, household appliances and office equipment with images rather than text commands)
            Natural User Interface (It is effectively invisible, and remains invisible as the user continuously learns increasingly complex interactions)
            or many other types like Hardware User Interface, Touch User Interface, Motion Tracking User Interface, Intelligent User Interface etc.CLI-GUI-NUI

 

Upon further reading, I found that all great interfaces share majorly Eight Qualities/Characteristics:

          Clarity: The interface avoids ambiguity by making everything clear through language, flow, hierarchy and metaphors for visual elements.

          Concision: It’s easy to make the interface clear by over-clarifying and labeling everything, but this leads to interface bloat, where there is just too much stuff on the screen at the same time. If too many things are on the screen, finding what you’re looking for is difficult, and so the interface becomes tedious to use. The real challenge in making a great interface is to make it concise and clear at the same time.

          Familiarity: Even if someone uses an interface for the first time, certain elements can still be familiar. Real-life metaphors can be used to communicate meaning.

          Responsiveness: A good interface should not feel sluggish. This means that the interface should provide good feedback to the user about what’s happening and whether the user’s input is being successfully processed.

          Consistency: Keeping your interface consistent across your application is important because it allows users to recognize usage patterns.

          Aesthetics: While you don’t need to make an interface attractive for it to do its job, making something look good will make the time your users spend using your application more enjoyable; and happier users can only be a good thing.

          Efficiency: Time is money, and a great interface should make the user more productive through shortcuts and good design.

          Forgiveness: A good interface should not punish users for their mistakes but should instead provide the means to remedy them.

The fact that human beings can only pay full attention to one thing at one time seems pretty obvious, but the formal name given to it Principle of least astonishment (POLA) and it to be considered an important  design principle for all kinds of interfaces was fascinating. This leads to the conclusion that novelty should be minimized.

I found a very interesting and a useful image by DesignMantic titled “The 10 commandments of UI Design” and it truly encompasses the much important essence of UI design.

UI-Design.png

 

Generally UI is thought of as the beauty of an application in computing world. Rather it focuses more on usefulness in delivering the product to the user. The purpose of UI is to get the user to the product as efficiently and quickly as possible.

Good UI
An effective UI design is intuitive, both in how it interacts with the user and how the user interacts with the site.
Good UI design has threads of familiarity. Even if I’m visiting your page or app for the first time, I should understand how it works–and quickly.
A good user interface holds my hand and takes me where I should go. Mostly, users like hand-holding.(at least I like it the first time I use an application 😛 ) And, that’s not an insult to the users.

Bad UI
Bad UI drops you off in the middle of the desert and expects you to make it on your own to the rain forest. It does not lead you where you need to go.
Bad UI design is sluggish, complicated, and generic. And, surprisingly, there’s little gray area. Either you have a thoughtful UI design, or you have a generic blob that doesn’t meet the requirements of your users.


Another interesting misconception is UX == UI.

To begin with, UX is an acronym User Experience and UI is for User Interface.
UX is the intangible design of a strategy that brings us to a solution.

with-title.png

As Erik Flowers puts it: “UI design is a huge part of UX. I would say that in a good majority of cases the UX designer does in fact design the interface. But UX is not UI. This is where the education of others comes in. Helping people understand just what UX is and the invaluable role it plays is illustrated beautifully with the UX Umbrella.”

ux-umbrella

 

UI implementation is generally thought of as an easier task . But in most scenarios there is a complex interaction with real back-end code and front-end script and it requires utmost professionalism.

Erik Flowers in his article UX is not UI takes up the journey of making a ‘killer UI’ through an ideal hypothetical:

  1. We presume the problem has been identified through the user/market/persona research.
  2. User flows and stories are made, then trashed, then made again, then iterated on until the problem flow is clear.
  3. With an idea of ways to solve the problem, some rapid experiments are carried out to validate the assumptions with the personas.
  4. Some IA work is done to break out the product/site into the logical areas and hierarchies.
  5. Various wireframes and sketches are drawn to start to organize where things could go on the screen.
  6. With all the preceding research material and UX work, now mockups with UI included can be made with confidence.
  7. With mockups and a UI designed, they are user tested and iterated on through some prototypes or experiments.
  8. After the mockups have been vetted, it’s now time to code up the interface – UI Design!
  9. Once the usability of the UI has been honed, you can move it on to production – the place that people usually think of as the singular UI.

That’s quite an idealized journey. Everyone follows the steps at their own pace customized according to their needs, time and resources.

After exploring a lot on UI/UX, I realized that it is one of the most under-rated job. It takes a lot of behind the scenes work to end up at a capable, elegant, and delightful interface. But the interface is not the solution and UX combats this very thing. It’s a huge strategic process that aims to create a product or website that customers/users/visitors are drawn to, find easy to use, and quickly understand.

It was really insightful reading all about UI/UX. Hopefully, I am able to put my newly gained knowledge into use by improving the User Interface of my application sQuick.


References:

Advertisements