This is an interesting depiction of how modern day web applications instead of convincing the customer on the application design confuse them more.
I think part of this is most of these apps are mimicking paper forms. I’ve even seen some cases where it seemed the UI form was meant to capture data for a specific HL7 message (ughh). It reminds me of some tardy ERP-type systems which we still have existing today.
While conventional wisdom holds one in good stride but as technology progresses I firmly believe that we would need to 'Think-out-of the box' designs.(these are tall words, but I am trying myself to figure out how?)
The UI has to be designed looking to the user who is going to use it and what information he would like to “USE” rather than ‘SEE’.
The below are a few guidelines which I guess would contribute to an efficient way to design a UI:
1) Style Sheet guidelines - We use CSS but sometimes new styles appear to be created without enough thought. You have to keep your CSS files clean and well documented. Review them on a regular basis to ensure that new styles are only being added when needed. I would personally prefer a CMS to handle this to maintain consistency.
2) Define guidelines around button placements e.g Save, Cancel, Submit- They should be ideally located at the same locations on the each pages.
3) Define load time expectations - If the page is taking too long to load(lot of graphics etc) then I guess the end-users would only be more frustated. Take care of that - minimality is the key.
4) Screen Resolution- Study your end-users, what systems they would be using. Certain countries still have the 800x600 dpi monitors. Optimise designs to fit those screen resolutions or Aspect Ratio
Resolutions with a 4:3 aspect ratio: 800 x 600; 1024 x 768 ; 1152 x 864 ; 1600 x 1200
Resolutions with a 5:4 aspect ratio: 1280 x 1024 ; 1600 x 1280
5) Use of descriptive text - What types of information should be provided to users? Information provided should be used and not only to see.
6) How are errors and confirmation text displayed - Do you take users to error pages or show messages on the page. Pick a method and stick with it.
7) Do you use pop-ups? If yes, how should they display and what behaviors must they support.- How are lists displayed? For example, if a lists of users is returned by a search make sure they are always displayed the same way. This code needs to be common and the display of the users should clearly be the same on every page. Certain browsers block pop-ups, one needs to factor that pre-requisite on the pages.
8) Concentrate on Semantics- e.g Data labels across all forms have to be consistent and should follow conventions.
9) For webforms - there could be mandatory and non-mandatory fields- Mark them separately.
10) As far as possible “Free text” fields should be minimized for web form based application unless unavoidable. Drop down’s or Radio buttons should be preferred wherever possible. This makes form filling faster, easier and data storage easy and retrievable for business intelligence reporting.
11) Strive for consistency, minimality, ease of use, neat design: Cater to universal usability, Offer informative feedback, Permit easy reversal of actions, Make users feel they are in control.
Feel free to add on this post with your comments/suggestions. I would appreciate your thoughts!
- Mustafa Balsara, PMP
This comment has been removed by the author.
ReplyDeleteI like this article. This is usefull while working on such web apps.
ReplyDeletefew more thoughts
1) user science: means what kind of user should use this application. Is he computer literate or sophisticated or he is lazy. What culture he is belongs for Instance: if we consider the Fiji citizen as user then what kind of look and feel he prefer is he like colorful look or grayscale look etc.
2) Design technique preferred for accessibility: Graceful Degradation is part of accessibility. “Graceful Degradation" is an important principle in Web design. It means that, when you put in features designed to take advantage of the latest and greatest features of newer browsers, you should do it in a way that older browsers, and browsers letting users disable particular features, can "step down" to a method that still allows access to the basic content of the site, though perhaps not as snazzy in appearance.
To avoid the accessibility problem we can use controlled JavaScript in webforms.
3) Brainstorming with appropriate person of the client: while brainstorming if we look at system like “silly user of the system” then we can create powerful and simple user interface for system.
In Brainstorming process communication with appropriate person of the client is ease to create sensible user interface. More Brainstorming more easy UI.
Thanks
Yogesh Patil