My First GSoC Post : Notes on process of designing a GUI application

Notes on UI Principles

  • Don’t design like a programmer

    Link : http://www.uxdesignedge.com/2010/03/dont-design-like-a-programmer/

    This post explains the process of UI design in three parts :

    1. General mistakes made by programmers like using variable names as control labels, letting variable types determine control types, exposing raw and unformatted data, forcing user to enter data in specific format ( i.e. exposing representation invariants) and overusing messages.Three types of issues are pointed out :
      1. Simplicity Issues : Most common and probable cases should be optimized and easily accessible. User should be asked only what is extremely necessary to fulfill the task. It is better to ask for input values which users can provide easily and confidently.
      2. Life Cycle Issues : Initial UI state shouldn’t be blank as it will confuse the user about where to start from. All options and fields shouldn’t be disclosed at once. We should use progressive disclosure to hide infrequently used settings. Data structures shouldn’t be mapped directly to a UI element, as there may be case that some fields are a part of single object, but they don’t necessarily have to be provided by the user at the same time.
      3. Efficiency Issues : Frequent actions should be minimized. Reasonable values can be assumed for frequently used options or user’s history can be saved for frequently used options. Unexpected input should be handled properly.
    2. Second post explains the some key points related to solving above mentioned problems :
      1. Identify target users for improving user experience. Understand their goals and preferences. Identify use cases.
      2. UI should be self explanatory. There should not be any need for documentation.
      3. UI’s should be task centric, not feature centric.

      Basic design process :

      • Define the product
      • Define the target users
      • Define the user goals
      • Define the top user tasks : Focus on top six tasks
      • Define the user’s context : Know user’s context
      • Explain each top task to a friend
      • Map your natural explanation into a page flow
      • Design each page
      • Simplify and optimize the task flow and pages
      • Review the communication
      • Verify that purpose of each page and control is clear
      • Review the results
    3. Third post is a worked out example of above steps for a simple product. It may act as a reference.
  • User Interface Design for Programmers by Joel Spolsky

    This book contains one of the excellent ideas of UI design explained with very simple and practical examples.

    Most of the chapters after very good and contain illustrative discussions which conclude with axioms like :

    1. “ A user interface is well designed when the program model conforms to the user model. “
    2. “ Users will assume the simplest model possible. ”
    3. “ Every time you provide an option, you’re asking the user to make a decision.” : They will have to stop and think. In general number of decisions to be taken by user should be minimum.
    4. Use real metaphors for objects to relate them with reality.
    5. UI design should be consistent. UI designers shouldn’t use their creativity to make an UI which works in totally different way than other programs intended for same purpose.
    6. And many others …
  • Designing Interfaces by Jenifer Tidwell

    It explains UI design in technical depth and explains some concepts like affordances, visual hierarchy, navigational distance and use of color. In addition to it, use case of almost all UI elements like selector, pagination, cancellability, button groups, geometry managers etc. are thoroughly explained. Most importantly almost all chapters are followed by a Patterns section which includes all requirements to be achieved by a good software. I think this is one of the best resources to learn UI design in a technical manner. This book explains almost everything from organizing the content, navigation, organizing a page, using different UI elements to fulfill tasks, handling “verbs” of a interface ( i.e how to present actions and commands), discussing cognitive effects of data representation ( information graphics ) and finally tells how to use graphic design patterns to improve aesthetics and look & feel of UI.

  • A Collection of many UI design resources :

    https://whitneyhess.com/blog/2009/06/30/so-you-wanna-be-a-user-experience-designer-step-1-resources/

  • UX Design Concepts:

    http://www.usability.gov/what-and-why/user-experience.html

Advertisements

Author: scorpiocoder

I am a 3rd year, IIIT-Chittoor student enthusiastic and confused about various software technologies : Python, Machine Learning, Networks, Natural Language Processing and Android Development

One thought on “My First GSoC Post : Notes on process of designing a GUI application”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s