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

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.

http://designinstruct.com/web-design/prototyping-is-essential/

• Understanding difference between Sketching, Wireframes, Mockups and Prototype.

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.

http://designmodo.com/wireframing-prototyping-mockuping/

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.

2. 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.

3. 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.

4. 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.

5. 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.

6. 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.

7. 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.

8. 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.

9. 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.

2. UX Resources:

1. Information Sources for UI/UX :

• LinkedIn :

• UX Professionals (Group) Link : https://www.linkedin.com/groups?home=&gid=38178&trk=anet_ug_hm

• 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

• Quora : User Experience : Link: (http://www.quora.com/User-Experience)

• 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