Thursday 17 September 2015

Good Vs Bad Designs

Good Vs Bad Designs


Looking and using variety of interfaces and designs, I daily come across usability issues in things around. However,  when I am writing about good vs bad designs, more of bad designs come to my mind. It does not mean that there are more bad designs around, rather I take things that are easy to use for granted. When trying to write on such topic I tend to recall designs that were more difficult to use or I had struggle using.

Some examples:

1. Door Bell System : This is how my door bell system looks like.
Current Design

The UI looks pretty neat however I have struggled between talk and listen buttons almost everyday. The scenario is like whenever the door bell rings, I:
1. Press the talk button,say Hi, who is that?
2. Release talk button.
3. Press the Listen button to hear out.
While switching between Talk and Listen I almost always miss beginning of what person at the door said.
A Good design would rather be having a one button that pressed should do functions of talk and listen both.(Something like below.)

New Proposed Design


2. Setting up a reminder on Iphone : Nothing against Apple! I m an Apple fan,however I don't much like Reminders app UI. The inability to set a reminder quickly without recalling how I managed to somehow do it last time, makes it a bad design for me. When I go to reminders in iphone, the screen is something like below: (callout gives my thought process when I m on that screen..)



I am looking for a screen that asks me very basic things about the reminder :

  • Reminder for, when and where(optionally).
Yes, Iphone reminders does have that screen too(below screenshot) but it has to be memorized, how to go to that screen. I always have to recall how to get to it. You are suppose to click on the blank line in the list displayed,which then becomes editable(screenshot on left below).You can then set up a name and by clicking on "i" icon go to the screen that you have been looking for(screenshot on right below).
 A good design is where I recognize by merely looking onto the screen,instead of recalling or struggling with the UI.



A good design would be anything that is intuitive. See below a screenshot from Google Now which, I feel gives a simple, intuitive and neat UI on clicking on set a reminder.
Good Design

3.  Travel Sites Search box and its search results: Below images are the search functionality designs from two different travel sites Priceline and Expedia.

Priceline


Expedia

Both the above images are self explanatory. The design from Expedia is not a bad design as it fulfills the need of the user however the design from Priceline, I would say, is better and makes me think less as a user.
There are many times that I go to a travel site and just know the city/place I want to visit. I am not sure about the airport near by. In that case Priceline site design helps me to reduce my cognitive load by clearly indicating categories in results list. Also the 'place of interest' word in search box makes a connection with my vacation mind. :)
This in no way concludes, that overall Priceline is a better site than Expedia or vice versa. The above example is a comparison of only one of the design features in both the sites.

The list can go on and on.. Before finishing I would like to share a quote that I recently read,
“It’s not enough that we build products that function, that are understandable and usable, we also need to build products that bring joy and excitement, pleasure and fun, and yes, beauty to people’s lives.”
— Don Norman


Thursday 19 February 2015

  1. Prototyping, Wireframing , Mockups

  • Need for Prototyping:
Whether it’s just a quick sketch in your notebook or a post-it note, a wireframe made using your favorite graphics software, or a high-fidelity mockup created by a web app — incorporating some form of prototyping within your workflow is a critical step. Checkout some reasons why prototyping is an integral part of the design process.

  • Understanding difference between Sketching, Wireframes, Mockups and Prototype.
Diff between Wireframe Prototype n Mockup.jpg
Confusing wireframes with prototypes is like assuming that an architectural blueprint (a detailed plan of a building-to-be) and a display house are the same thing.
A detailed article that talks about what exactly are wireframes, prototypes and mockups and when to use each one of them.

There are hundreds of wire-framing tools in the market, some online, some desktop-based, some free, and some paid.However choosing which one to use is a tricky decision.Taking advantage of trial downloads or free software and finding the one that fits in with the way you work is the only way of finding out which one is right for you.

What features do we look for in UI tools?

1. Web based application
2. Possibility of adding team members (clients included)
3. Comments available for all users
4. Variety of mockup creation components
5. Responsive design availability
6. Easy and fast file uploading
7. Compatibility of all mockups in a project. (a possibility to copy, move components)

Based on features each tool offers, here are top five tools for each step of UI design that I think may fit most of the design needs.
Sketching : Balsamiq, POP , White Boards
Wireframing : Balsamiq, Moqups ,Invision. Wireframe.cc , Lumzy
Mockups : Invision, Moqups , Lumzy, Gomockingbird
Prototyping : UXPin, Invision, Hotgloo, Proto.io, Solidify
Brief Description about each tool:
  1. Balsamiq :
Pros:
  • User-friendly interface that lets you drag and drop elements
  • It comes with a lot of prebuilt controls commonly used in web design saving you time and speeding up your output.
  • Intuitive to use with almost no learning curve so you can get started straight away.
Cons:
  • Balsamiq’s only flaw is the wireframes can look a little childlike and unfinished. However it succeeds in being the missing link between the sketch pad and computer.

  1. Moqups :
  • Plenty of Drag and Drop elements available.
  • Screens and buttons can be linked so you can publish a demonstration for your clients to view.
  • Images can be exported for specification diagrams.
  • Moqups help develop your projects whether they are browser-based or designed for mobile devices.
  • The two most engaging features about Moqups compared to other solutions is the unlimited team members that can be added to any project and the capacity to integrate with Google Drive and Dropbox.

  1. UXPin:
Pros:
  • Collaborative online design tool
  • Allows you to create wireframe and prototypes that are interactive.
  • UXpin will appeal to advanced users who want to spend more time creating beautiful full colour wireframes.
  • It’s intuitive and transparent interface offers wide range of features like rulers or guides just like in Photoshop.Also, they allow user customization which is very convenient.
  • Uses Javascript n HTML5 which is lightweight and reliable.
When it comes to work on mockups in a team, UX Pin ticks all the above features listed for a good UI tool.
Cons: The one thing which may bother someone is pricing. It’s $14,99 for one user only and there are no team packages.

  1. Solidify:
It is a complete tool that lets you create clickable prototypes specially oriented for user testing. You can test interfaces at any phase of development. It's possible to create responsive prototypes and connect with testers around the world. The tool gives you reports on highly valuable data about user behavior, such as where users click and other usability reports. You can try the app for 30 days. Monthly cost $19.

  1. Invision :
Pros:
  • Allows you to upload working designs and create interactions by using hotspots, just like any real application.
  • Invision App has been really useful for communicating the design transitions and journeys between screens to other team members.
  • One of it’s standout features is the ability to send clickable designs to your phone via SMS, underlining the importance of being able to test your designs yourself in context. Support for Android phones has also just been announced.

  1. Proto.io :
With proto.io you can create high-fidelity prototypes that work exactly like your real app would. Select devices and add components to create your interface. Proto.io was specifically created for mobile, so it can emulate screen transitions, orientation changes or touch gestures.

  1. POP (Prototyping on Paper) :
POP is a mobile app for Android and iOS that lets you import your sketches by taking a picture. POP automatically adjusts brightness and contrast to make sure your sketches are legible and clear.

  1. Hotgloo :
HotGloo helps you from low- to high-fidelity, from wireframes to prototypes - with HotGloo you can finally achieve great concepts in a fast, simple and beautiful way. Mock up an idea, gather feedback, review and improve over time.
Pros:
  • Plenty of Drag and Drop elements available.
  • Every component within HotGloo provides quite a bit of customization. Each control can be manipulated by position, size, border color, fill and much more in order to provide the exact look and feel for which you're looking.
  • Additional pages can be added to the project in order to allow you to present a flow of what an individual may experience when visiting the site. For example, you can develop the first page to be a login screen while subsequent pages provide a look that is experienced once a user has gained access.
  • Images can be exported for specification diagrams.
Cons:
Uses Flash- which, for this particular usage, is an out-dated technology. According to reviews available online it causes fans in Macs spins like crazy and reliability & speed might be an issue.

  1. Wireframe.cc :
Wireframe.cc has a super-minimal interface that give you an easy way to create elements. You can change the color of wireframes and create clear layouts to share.

  1. UX Resources:


  1. Information Sources for UI/UX :
  • LinkedIn :
  • UX Magazine (Company) : UX Magazine is free a community resource exploring all facets of experience design. They work closely with practitioners and industry leaders versed in all areas of UX to provide a steady stream of engaging and useful content.
  • Usability Matters (Showcase Page)
  • Usability Matters.Org (Group)
  • Usability.Org
  • Stack Exchange : UX :
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.Link : http://ux.stackexchange.com/

  • User Experience Professionals Association : UXPA :
The User Experience Professionals Association (UXPA) supports people who research, design, and evaluate the user experience of products and services.
UXPA holds yearly international conferences, publishes new findings through both the Journal of Usability Studies (JUS) and through User Experience Magazine, and has 50 chapters around the world. In 2004, UXPA established World Usability Day, which in 2011 was celebrated in 44 countries.
  • UX Mastery : Community : UX Mastery is an online resource for aspiring user experience designers.They are passionate about teaching others how to design websites, mobile apps and desktop apps that are useful, usable and delightful. They occasionally offer in-person training, but the main goal is to share experiences online—through blog, email newsletter, and their popular ebooks.. Link : http://community.uxmastery.com/
  • UX Booth : The UX Booth is a publication by and for the user experience community. Their readership consists mostly of beginning-to-intermediate user experience and interaction designers, but anyone interested in making the web a better place to be is welcome. Link : http://www.uxbooth.com/
  • Nielsen Norman Group : NN/g conducts groundbreaking research, evaluates user interfaces, and reports real findings – not what's popular or expected. With their approach, NN/g will help you create better experiences for real people and improve the bottom line for your business.They have some very useful articles on usability and its trends.Link : http://www.nngroup.com/
  • 28 Resources for Getting Started In UX : http://www.measuringu.com/blog/getting-started.php

Tuesday 23 December 2014

Incorporating user experience #ux in your daily tasks

Lot has been talked about usability of user interfaces be it a website or a desktop app or even a mobile app.The term 'Usability' is mostly associated with the ease of use of a software and its user interface.However, after undergoing few courses/training on Usability I have felt the need of incorporating it not only in your software but in anything that has a user interface.

'A picture is worth a thousand words' , holds so true here.Anything if represented pictorially is much faster to understand to a human. Few examples that I have incorporated my usability knowledge into, may justify the above statement :

Example 1 -> Leave Plan representation : Say I have a vacation plan that looks too big looking at the date range but is actually not that big as it sounds , since there is a work from home, long weekend and few official holidays n between in the plan.

Say the plan is :

  • Work from home from 17 to 21st Oct 2014
  • Leave from 22nd to 31st Oct 2014  where 23rd, 24th are declared official holidays(Diwali)

So, the date range of absence from office is looked at, it is : 17th - 31st Oct which is like 14 days. If applied as above text , the chances of it getting approved are less and may require an explanation.

However, applying it as a pictorial representation may avoid confusion leading to lesser chances of rejection/modification of the plan.Here s the pictorial representation of the plan:


The above picture helps to :

  • Express the plan smartly
  • Quick and clear access to the leave plan
  • Avoid locating the text in the mail and then reading it. 

Lately when I encountered a difficulty in remembering leave plans of my peers I realized, had it been a pictorial info it would have been quicker and easier to refer to.

Some may be already using it while some may feel, the above example may not be worth spending so much time in doing a minor task such as applying a leave.That s absolutely true, but with the above example I just want to focus on the importance of usability and its application to your day to day tasks.

Also, I spent a total of 7 mins in making the above image (Message me to know how @garimakalra25 ).

Example 2 -> Minutes of Meeting : One of our retrospective meetings involved discussion around the process of parallel tasks of two sub teams(Development and QA) within our team. Discussion involved the tasks that each team would be doing in parallel in all the phases of development cycle. After the meeting minutes of the meeting had to be published across the team. I volunteered for it and here is what I came up with :


I agree, that the above is not a rocket science and is a simple flowchart made using MS Office Smart Art.Many of you might be already using it at places, but the focus here is the pictorial representation of a 5 step process. The process was result of minutes of meeting and many would have used paragraphs/bullets to explain it, failing half of the readers to even go through it.

Example 3-> Use of shapes/pictures in documentation to avoid long paragraphs and allow fast interpretation of the content: Once while preparing a document for one of my projects I was suppose to add a text as : "A fuel tank attribute, A can have 3 status's Green,Red,Yellow based on its current inventory level and boundaries for different status's are as follows :
Green: Greater than X
Red: Less than Y
Yellow: X-Y
'A' will be decided based on current inventory level of the tank.So if current inventory level is somewhere between X and Y , then A will be Yellow.
The above paragraph was replaced by a picture as below :



  • Studies have shown that humans look first at pictures and then at the text.
  • Most of you must have seen the pictorial representation before even reading the text , in all the above cases.
  • Another advantage of using pictures is that once you are able to visualize what the text is trying to state, you feel more connected and comfortable with the text too, improving the overall user experience and usability of the content.


Conclusion : Usability can be applied to almost all of your daily tasks, provided the main goal of conveying the actual information that is intent of the task is not defeated.

Thursday 13 November 2014

Tried but Failed: Usability Learning Experiences



Tried but Failed:  Usability Learning Experiences

1.Adding drag n drop feature to a functionality which can otherwise be performed by a simple button click: 
A functionality to assign certain entity to a user could be done with a simple selection of the entity and clicks add option.
In our application, we tried to make it more sophisticated by adding a drag n drop option to do this. So now user had two options to do the same action and this is how they look:



 

Differences in both designs:

Design 1:
1.Old typical look and feel.
2.Number of steps to complete the task was one step more than Design 2.
3.Cheap (Cost wise) to implement.

Design 2:

1.More latest in look and feel.
2.Number of steps to complete the task was one step less than Design 1.
3.Expensive to implement.

Any guesses for which option you think was used more??

Well! It is Design 1.Due to its ease of use and intuitiveness, design1 was more used.
Drag n drop is more sophisticated in look and feel and is also easy to use otherwise, but in this case:
  • Lack of intuitiveness: User had no clue that drag n drop was also a way of doing the same action. The green add/remove icons on the right hand side of Design 2 were displayed only when user clicked on the entity and dragged it.So even if the user was told this way of doing the action, in user-training, it was not intuitive enough. So user couldn't recognize and rather had to recall each time of this option. As a result user used option he/she could see at first instead of remembering how to do it. 
  • Not very easy to use: Drag n drop works in a way that , the source is supposed to be dropped at the target. So it works well when distance to drag is shorter and the target is bigger. In this case the distance to target could be bigger and not very easy for the user to keep dragging till that distance.

Lessons Learnt here were:
•Heuristics/Principles of a subject are important. They can be avoided at times but cannot be ignored. In the case above, one of the major design principles of design “Shorter distances bigger targets" was being avoided.
•Visual affordance: A design should be intuitive enough visually such that user doesn't have to recall about its functionality.

2. Giving "+Detail" option in a table: 
"+more”, "+details" have been lately used to display details on demand. At first glance user can see only the information that user can absorb and can see more info on request if he/she is interested.
We implemented this feature in one of the grids/table displaying data of reports generated by the user.
At first glance details shown were: Report Name, Time of Report Generated, Type of Report, and No. of rows in the report.
There were various filters available which could be applied in a report. But there was no way of seeing it after the report was generated except downloading the report and opening it to see what it contains.
Best solution crafted to address this issue was adding +Details with the every report displayed. This is how it looked:

As a team we were really excited to design this feature. We thought this feature will be quite helpful to the user as there was no way of looking out the details earlier than this was implemented except downloading the report and opening it.
However, it is still a doubt whether users are actually using it or not. We are assuming that most users are not using it since this section is not being well maintained in the sense, that any enhancements done to the filter section (on the left side of above screenshot) needs an effort in this newly designed details section as well.
But this effort is not being put as it is termed as "low priority" and as a result it has become stale / outdated not being at par with other functionality.

Lessons Learnt here: It is good to know your users and interview them before the designing phase, however it is very difficult to have access of actual users especially in a project where your client is not the actual end user.
The challenge is to understand what works and what does not with the end users when there is a limited/no access to the actual end user.
One way to understand this without having access to the end users understands user patterns through analytic. There are ways to record user actions/clicks. This data can further be used to analyze success/failure of a feature/functionality.
I have no experience to share on this area yet. Shall keep this blog posted if at all I get a chance to work on this area.

3.Accommodating additional information in tool tips instead of adding columns to the UI:
An important principle to be kept in mind is that users don’t learn/ remember too much information present on the UI.
One of the articles I read related to User Experience describes it really well. It associates user experience with the snowplow. Below is the, very interesting portion taken from that article:

“Let’s take a moment to ponder the humble snow plow. It’s a device of unquestionable value. It keeps roads safe and can be called upon in snowstorms and blizzards to clear paths to otherwise unreachable locations. 
In many areas around the world it’s an essential public safety tool.But if you owned a snow plow, would you drive it to the corner grocery store? Or to work every day?
Probably not, unless you lived in Antarctica. Most of us live in climates that require the use of snowplows only periodically, during the worst weather conditions – if at all. 
In fact, many people have never benefitted from a snow plow. But where they’re needed, they’re indispensable.
So what does this have to do with user experience and interface design? Think of building an interface with a great deal of unnecessary information and capabilities as the metaphoric equivalent of using a snowplow for one’s daily commute. 
Sure, it gets you there – but what portion of the capabilities are actually needed? Would a smaller, more efficient vehicle work just as well? Is it possible to achieve the goal without firing up the heavy equipment?”

Packing too much information on an interface causes confusion and most of the times users get distracted with extra information resulting in poor user experience. This is what happened with our web app.

There was a requirement to show type of an entity displayed as a column in the table. A user should be able to know type for each of the entity Open inventory, Delivery, Sales, Close Inventory ([1] Screenshot above) displayed as columns in the table.
The values (6000, 3675, 7897 and 7000) in [2] in above screenshot could be of Type A, Type B or Type C. So it was required to display its type.

[3] In above screenshot shows the horizontal scroll giving hint of number of columns already present in the table.

Two solutions were proposed: 
1.Add type column for each entity. There were 4 entities so in all 4 columns were required to be added.
2.Display type as a tool tip on each entity. So when user hovered on value 6000 its Type will be displayed in tool tip.

Differences in both designs: 

Design 1:
1.Uses more real estate.4 columns are to be added which will increase the horizontal scroll even more.
2.Not very easy to use. As the entity column is towards the left and to know its type user has to scroll to extreme right.
3.Displayed upfront on UI.

Design 2:
1.Used less real estate. No columns need to be added.
2.Comparatively easy to use. No need to scroll just hover on the entity to know its type.
3.Information is hidden until the user mouse hovers.

Any guesses for which option you think was chosen??

It is Design 1. The main reason was information was upfront present on the UI.
I strongly recommended Design 2 but couldn't understand the choice of Design 1 as the solution chosen. Snow plow principle described above can be related here.

Lessons Learnt Here: 
You can work on information to be shown or removed, if you get to know the following:

  • What’s most needed
  • by the greatest number of users
  • in the greatest number of high probability use cases.

You can move or remove elements and functions that are less important, which is also called design for probabilities vs possibilities.

Conclusion : At times you may craft  best of design as a way of doing thing but it still may not work with the users/clients.So if you have heuristics or data to prove that your design will work the best it will be more helpful to get it approved.