<p>What techniques do you know\use to create user-friendly GUI ? </p>

<p>I can name following techniques that I find especially useful:  </p>

<ul>
<li>Non-blocking notifications (floating dialogs like in Firefox3 or Vista's pop-up messages in tray area)</li>
<li>Absence of "Save" button<br>
MS OneNote as an example.<br>
IM clients can save conversation history automatically</li>
<li>Integrated search<br>
Search not only through help files but rather make UI elements searchable.<br>
Vista made a good step toward such GUI.<br>
<a href="http://www.istartedsomething.com/20070124/scout-office-2007/" rel="nofollow noreferrer">Scout</a> addin Microsoft Office was a really great idea.</li>
<li>Context oriented UI (Ribbon bar in MS Office 2007)</li>
</ul>

<p>Do you implement something like listed techniques in your software?</p>

<p><strong>Edit:</strong><br>
As <a href="https://stackoverflow.com/questions/42793/gui-design-techinques-to-enhance-user-experience#42843">Ryan P</a> mentioned, one of the best way to create usable app is to put yourself in user's place. I totally agree with it, but what I want to see in this topic is specific techniques (like those I mentioned above) rather than general recommendations.</p>

[{'answer_id': 42843, 'author': 'Ryan P', 'author_id': 1539, 'author_profile': 'https://Stackoverflow.com/users/1539', 'pm_score': 0, 'selected': False, 'text': '<p>The best technique I found is to put your self in the users shoes. What would you like to see from the GUI and put that in front. This also gives you the ability to prioritize as those things should be done first then work from there.</p>\n\n<p>To do this I try to find "layers of usefulness" and add / subtract from the layers until it seems clean. Basically to find the layers I make a list of all the functions the GUI needs to have, all the functions it should have, and all the functions it would be neat to have. Then I group those so that every thing has logical ordering and the groupings become the "layers". From the layers I then add the most important functionality (or what would be used for Day to Day operation) and that becomes the most prominent part, and I work things into the feature around those items.</p>\n\n<p>One of the toughest things is navigation as you have so much to give the use how do you make it helpful and this is where the layers really help. It makes it easy to see how to layout menus, how other pieces interact, what pieces can be hidden, etc. </p>\n\n<p>I have found the easiest way to do this is to start by see what and how your users function on a day to day basis this which will make it easier to get in their shoes (even better is to do their job for a few days). Then make some demonstrations and put them in front of users even if they are Paper Prototypes (there is a book on this process called Paper Prototyping by Carolyn Snyder). Then begin building it and put it in front of users as it is built <em>often</em>. </p>\n\n<p>I will also recommended the book Designing Interfaces by Jenifer Tidwell published by O\'Reilly</p>\n'}, {'answer_id': 42875, 'author': '17 of 26', 'author_id': 2284, 'author_profile': 'https://Stackoverflow.com/users/2284', 'pm_score': 0, 'selected': False, 'text': "<p>The items in the list you presented are really situation dependent - they will vary from application to application.  Some applications will need a save button, some won't.  Some conditions will warrant a modal dialog box, some won't.  </p>\n\n<p>My top rule for designing a usable interface:  Follow existing UI conventions.  Nothing confuses a user more than a UI that doesn't work like anything they've ever used.  Lotus Notes has one of the worst user interfaces ever created, and it is almost entirely because they went against common UI conventions with just about everything that they did.</p>\n\n<p>If you're questioning how you should design a certain piece of your UI, think of a few standard/well-known applications that provide similar functionality and see how they do it.</p>\n"}, {'answer_id': 42880, 'author': 'Rodrick Chapman', 'author_id': 3927, 'author_profile': 'https://Stackoverflow.com/users/3927', 'pm_score': 0, 'selected': False, 'text': '<p>If your UI involves data entry or manipulation (typical of business apps) then I recommend    affording your users the ability to act on <em>sets</em> of data items as much as possible. Also try to design in such a way that experienced users can interact with the UI in a very random, as opposed to sequential way (accelerator keys, hyperlinks, etc).</p>\n'}, {'answer_id': 42891, 'author': 'wusher', 'author_id': 1632, 'author_profile': 'https://Stackoverflow.com/users/1632', 'pm_score': 5, 'selected': False, 'text': '<p>If you do give the user a question, don\'t make it a yes/no question. Take the time to make a new form and put the verbs as choices like in mac. </p>\n\n<p>For example:</p>\n\n<pre><code> Would you like to save?    \n     Yes        No\n</code></pre>\n\n<p>Should Be:</p>\n\n<pre><code>  Would you like to save?\n    Save        Don\'t Save \n</code></pre>\n\n<p>There is a more detailed explanation <a href="http://www.usabilitypost.com/post/11-usability-tip-use-verbs-as-labels-on-buttons" rel="noreferrer">here.</a></p>\n'}, {'answer_id': 42929, 'author': 'qwertyuu', 'author_id': 1261, 'author_profile': 'https://Stackoverflow.com/users/1261', 'pm_score': 2, 'selected': False, 'text': '<p>If you implement a search, make it a live search like what <a href="http://www.locate32.net/" rel="nofollow noreferrer">Locate32</a> and Google Suggest does now. I am so used to not pressing "Enter" at the search box now.</p>\n'}, {'answer_id': 42957, 'author': 'Nathan Long', 'author_id': 4376, 'author_profile': 'https://Stackoverflow.com/users/4376', 'pm_score': 2, 'selected': False, 'text': '<p>One of the classic books to help you think about design is "The Design of Everyday Things" by Donald Norman. He gives great real-world examples. For example, if you design a door well, you should never have to add labels that say "push" and "pull." If you want them to pull, put a handle; if you want them to push, put a flat plate. There\'s no way to do it wrong, and they don\'t even have to think about it.</p>\n\n<p>This is a good goal: make things obvious. <b>So obvious that it never occurs to the user to do the wrong thing</b>. If there are four knobs on a stove, each one next to an eye, it\'s obvious that each knob controls the eye it\'s next to. If the knobs are in a straight line, all on the left side, you have to label them and the user has to stop and think. Bad design. <b>Don\'t make them think.</b></p>\n\n<p>Another principle: if the user <b>does</b> make a mistake, it should be <b>very easy to undo</b>. Google\'s image software, Picasa, is a good example. You can crop, recolor, and touch up your photos all you like, and if you ever change your mind - even a month later - you can undo your changes. Even if you explicitly save your changes, Picasa makes a backup. This frees up the user to play and explore, because you\'re not going to hurt anything.</p>\n'}, {'answer_id': 43139, 'author': 'Dhaust', 'author_id': 242, 'author_profile': 'https://Stackoverflow.com/users/242', 'pm_score': 5, 'selected': False, 'text': '<p>Check out the great book <a href="https://rads.stackoverflow.com/amzn/click/com/0789723107" rel="nofollow noreferrer" rel="nofollow noreferrer">Don\'t make me think</a> by Steve Krug.<br>\nIt\'s web focused but many of the conepts can apply to anything from blenders to car dashboards.<br>\nTopics covered: </p>\n\n<ul>\n<li>User patterns </li>\n<li>Designing for scanning </li>\n<li>Wise use of copy </li>\n<li>Navigation design </li>\n<li>Home page layout </li>\n<li>Usability testing  </li>\n</ul>\n\n<p>He also has a blog called <a href="http://www.sensible.com/" rel="nofollow noreferrer">Advanced Common Sense</a>  </p>\n\n<p>And some random UI related links:<br>\n - <a href="http://www.joelonsoftware.com/uibook/chapters/fog0000000057.html" rel="nofollow noreferrer">User Interface Design for Programmers</a> by Joel Spolsky<br>\n - <a href="http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/" rel="nofollow noreferrer">10 Usability Nightmares You Should Be Aware Of\n</a>  </p>\n'}, {'answer_id': 43348, 'author': 'Ced-le-pingouin', 'author_id': 3744, 'author_profile': 'https://Stackoverflow.com/users/3744', 'pm_score': 2, 'selected': False, 'text': "<p>Well, one thing that may be obvious: don't change (even slightly) the position, color, font size, etc. of buttons, menus, links, etc. between screens if they do the same type of action.</p>\n"}, {'answer_id': 44245, 'author': 'wusher', 'author_id': 1632, 'author_profile': 'https://Stackoverflow.com/users/1632', 'pm_score': 1, 'selected': False, 'text': '<p>If you are doing enterprise software, a lot of users will have small monitors at low resolution. Or if they are old they will have it at a low res so they can see giant buttons ( I have seen an 800x600 on a 24"ish monitor). I have an old 15" monitor at a low resolution (800 x 600) so i can see what the program will look likes in less than idle conditions every now and then. I know that enterprise users pretty much have to accept what they are given but if you design a winform that doesn\'t fit into an 800x600 screen, it\'s not helping anyone.</p>\n'}, {'answer_id': 44280, 'author': 'Jason Sparks', 'author_id': 512, 'author_profile': 'https://Stackoverflow.com/users/512', 'pm_score': 2, 'selected': False, 'text': '<p>I\'ve found <a href="http://ui-patterns.com/" rel="nofollow noreferrer">UI Patterns</a> to be a useful reference for this sort of thing. It\'s arranged much like the classic GoF Design Patterns book, with each pattern description containing:</p>\n\n<ul>\n<li>The problem the pattern solves</li>\n<li>An example of the pattern in action</li>\n<li>Sample use cases for the pattern</li>\n<li>The solution to implement the pattern</li>\n<li>Rationale for the solution</li>\n</ul>\n'}, {'answer_id': 44339, 'author': 'Russell Leggett', 'author_id': 2828, 'author_profile': 'https://Stackoverflow.com/users/2828', 'pm_score': 2, 'selected': False, 'text': '<p>Really good feedback is extremely important. Even simple things like making it obvious what can and cannot be clicked can be overlooked or too subtle. Feedback when something might happen in the background is great. In gmail, it\'s great that there\'s a status ribbon appearing at the top that let\'s you know if something is sending or loading, but it\'s even better that it lets you know that something has sent successfully or is <em>still</em> loading.</p>\n\n<p>The "yellow fade" technique is something else made popular amongst the RoR crowd that accomplishes something similar. You never want the user to ask the question, "What just happened?" or "What will happen when I do this?".</p>\n\n<p>Another trick that has become more popular lately that I\'ve been using a lot is editing in place. Instead of having a view of some data with a separate "edit" screen (or skipping the view and <em>only</em> having an edit screen), it can often be more user friendly to have a nicely laid out view of some data and just click to edit parts of it. This technique is really only appropriate when reading the data happens more often than editing, and is not appropriate for serious data-entry.</p>\n'}, {'answer_id': 74655, 'author': 'Mal Ross', 'author_id': 8705, 'author_profile': 'https://Stackoverflow.com/users/8705', 'pm_score': 4, 'selected': False, 'text': '<p>To add to your list, aku, I would put <strong>explorability</strong> as one of my highest priorities. Basically, I want the user to feel safe trying out the features. They should never back away from using something for fear that their action might be irreversible. Most commonly, this is implemented using undo/redo commands, but other options are no doubt available e.g. automatic backups.</p>\n\n<p>Also, for applications that are more process-oriented (rather than data-entry applications), I would consider implementing an interface that <em>guide</em> the user a bit more. Microsoft\'s <a href="http://msdn.microsoft.com/en-us/library/ms997506.aspx" rel="nofollow noreferrer">Inductive User Interface guidelines</a> can help here, although you need to be very careful not to overdo it, as you can easily slow the user down too much.</p>\n\n<p>Finally, as with anything that includes text, make the user interface as scannable as possible. For example, if you have headings under which commands/options appear, consider putting the action word at the start, rather than a question word. The point that Maudite makes is a good example of scannability too, as the "Don\'t Save" button text doesn\'t rely on the context of the preceding paragraph.</p>\n'}, {'answer_id': 184020, 'author': 'Ande Turner', 'author_id': 4857, 'author_profile': 'https://Stackoverflow.com/users/4857', 'pm_score': 4, 'selected': False, 'text': '<blockquote>\n<h2>First Principles: <a href="http://www.informatik.uni-trier.de/%7Eley/db/indices/a-tree/h/Hansen:Wilfred_J=.html" rel="nofollow noreferrer">Wilfred James Hansen</a></h2>\n<ul>\n<li>Know the User</li>\n<li>Minimize Memorization</li>\n<li>Optimize Operations</li>\n<li>Engineer for Errors</li>\n</ul>\n</blockquote>\n<br>\n<blockquote>\n<h2>Subsequent Expansions: <a href="http://www.theomandel.com" rel="nofollow noreferrer">Dr. Theo Mandel</a></h2>\n<h3>Place Users in Control</h3>\n<ul>\n<li>Use Modes Judiciously <strong>(modeless)</strong></li>\n<li>Allow Users to use either the Keyboard or Mouse <strong>(flexible)</strong></li>\n<li>Allow Users to Change Focus <strong>(interruptible)</strong></li>\n<li>Display Descriptive Messages and Text <strong>(helpful)</strong></li>\n<li>Provide Immediate and Reversible Actions, and Feedback <strong>(forgiving)</strong></li>\n<li>Provide meaningful Paths and Exits <strong>(navigable)</strong></li>\n<li>Accommodate Users with Different Skill Levels <strong>(accessible)</strong></li>\n<li>Make the User Interface Transparent <strong>(facilitative)</strong></li>\n<li>Allow Users to Customize the Interface <strong>(preferences)</strong></li>\n<li>Allow Users to Directly Manipulate Interface Objects <strong>(interactive)</strong></li>\n</ul>\n<h3>Reduce Users\' Memory Load</h3>\n<ul>\n<li>Relieve Short-term Memory <strong>(remember)</strong></li>\n<li>Rely on Recognition, not Recall <strong>(recognition)</strong></li>\n<li>Provide Visual Cues <strong>(inform)</strong></li>\n<li>Provide Defaults, Undo, and Redo <strong>(forgiving)</strong></li>\n<li>Provide Interface Shortcuts <strong>(frequency)</strong></li>\n<li>Promote an Object-action Syntax <strong>(intuitive)</strong></li>\n<li>Use Real-world Metaphors <strong>(transfer)</strong></li>\n<li>User Progressive Disclosure <strong>(context)</strong></li>\n<li>Promote Visual Clarity <strong>(organize)</strong></li>\n</ul>\n<h3>Make the Interface Consistent</h3>\n<ul>\n<li>Sustain the Context of Users’ Tasks <strong>(continuity)</strong></li>\n<li>Maintain Consistency within and across Products <strong>(experience)</strong></li>\n<li>Keep Interaction Results the Same <strong>(expectations)</strong></li>\n<li>Provide Aesthetic Appeal and Integrity <strong>(attitude)</strong></li>\n<li>Encourage Exploration <strong>(predictable</strong>)</li>\n</ul>\n</blockquote>\n'}, {'answer_id': 636066, 'author': 'Abdu', 'author_id': 5232, 'author_profile': 'https://Stackoverflow.com/users/5232', 'pm_score': 3, 'selected': False, 'text': '<p>A useful technique which I never see anyone use is to add a tooltip for a disabled UI control explaining why the control is disabled. So if there\'s a listbox which is disabled and it\'s not clear why it is disabled, I want to hover over it and it tells me why it\'s disabled. I want to see something like "It\'s disabled because two textboxes on the screen were left blank or because I didn\'t enter enough characters in some field or because I didn\'t make a certain action.". </p>\n\n<p>I get into sooooo many such situations and it\'s frustrating. Sometimes I end up posting in the software\'s forum asking why a control is greyed out when a tooltip could have helped me in a second! Most of these software have help files which are useless in these kinds of scenarios.</p>\n\n<p>Try to pretend you know nothing about your software and try using it. However this is not practical because you already have a certain mind set towards the app. So watch fellow developers or friends use the app and look out for the pain points and ask for feedback.</p>\n'}, {'answer_id': 636088, 'author': 'dance2die', 'author_id': 4035, 'author_profile': 'https://Stackoverflow.com/users/4035', 'pm_score': 1, 'selected': False, 'text': '<p><a href="http://www.dotnetrocks.com/default.aspx?showNum=338" rel="nofollow noreferrer">Here</a> is a great DotNetRocks podcast episode where Mark Miller talks about how to create <strong><em>Good UI</em></strong>; Even though the show title is .NET rocks, this episode talks about a general rule of thumbs on how to create a UI to increase program user\'s productivity.</p>\n\n<p>Here is an episode exerpt</p>\n\n<blockquote>\n  <p>Good user interface design can be done by sticking to some good rules and avoiding common mistakes. You don\'t need to be a latte-sippin tattoo-wearin macbook-carrying designer to create user interfaces that work.</p>\n</blockquote>\n'}, {'answer_id': 636113, 'author': 'Matthew Dresser', 'author_id': 15613, 'author_profile': 'https://Stackoverflow.com/users/15613', 'pm_score': 1, 'selected': False, 'text': '<p>Try to think about your user\'s end goals first before deciding what individual tasks they would carry out when using your software.  The book <a href="http://www.cooper.com/insights/books/" rel="nofollow noreferrer">About Face</a> has excellent discussions on this sort of thing and though quite long is very interesting and insightful. It\'s interesting to note how many of their suggestions about improving software design seem to used in google docs...</p>\n\n<p>One other thing, keep your user interface as simple and clean as possible. </p>\n'}, {'answer_id': 642732, 'author': 'elpipo', 'author_id': 77713, 'author_profile': 'https://Stackoverflow.com/users/77713', 'pm_score': 0, 'selected': False, 'text': '<p>Sung Meister mentioned Mark Miller. You can find some of his blog posts regarding great UI on the <a href="http://community.devexpress.com/search/SearchResults.aspx?q=userid:2151+AND+&quot;great+ui&quot;&amp;o=Relevance" rel="nofollow noreferrer">Developer express blog</a>. Here\'s a screencast of his Science of great UI presentation: <a href="http://www.veoh.com/browse/videos/category/technology/watch/v6514272kDxJkKgr" rel="nofollow noreferrer">part1</a>  and  <a href="http://www.veoh.com/browse/videos/category/technology/watch/v6514273ST39Rmd4" rel="nofollow noreferrer">part2</a>. (both require <a href="http://www.veoh.com/download" rel="nofollow noreferrer">Veoh player</a>).</p>\n\n<p>You can also find him on dnrTV: Science of great user experience: <a href="http://www.dnrtv.com/default.aspx?showNum=112" rel="nofollow noreferrer">part1</a> and <a href="http://www.dnrtv.com/default.aspx?showNum=123" rel="nofollow noreferrer">part2</a>.</p>\n\n<p>Here\'s a <a href="http://video.google.com/videoplay?docid=-6459171443654125383" rel="nofollow noreferrer">google techtalks about user experience</a> by Jen Fitzpatrick.</p>\n\n<p>Cheers</p>\n'}, {'answer_id': 726759, 'author': 'Brann', 'author_id': 47341, 'author_profile': 'https://Stackoverflow.com/users/47341', 'pm_score': 0, 'selected': False, 'text': "<p><strong>When using a dropdown, the default dropdown height is usually too low</strong> (default is 8 items for winforms, for example).</p>\n\n<p>Increasing it will either save the user a click if the number of items is low or make it easier to search the dropdown if there are a lot of items.</p>\n\n<p>In fact, I see little point in not using all the available space !</p>\n\n<p>This is so obvious to me now, but for example, it seems even VisualStudio designers haven't figured it out (btw, if you manually increase Intellisense's height, it will stay this way, but that's offtopic:))</p>\n"}, {'answer_id': 726794, 'author': 'Bryan Oakley', 'author_id': 7432, 'author_profile': 'https://Stackoverflow.com/users/7432', 'pm_score': 0, 'selected': False, 'text': '<p>I\'ll give one of my personal favorites: avoid dialog boxes at all costs. A truly good U I should almost never need to pop up a dialog box. Add them to your program only as a truly last resort. </p>\n\n<p>For more, you might want to check out <a href="https://stackoverflow.com/questions/284906/easily-digestible-ui-tips-for-developers/284933#284933">easily digestible ui tips for developers</a>. </p>\n'}, {'answer_id': 844125, 'author': 'thSoft', 'author_id': 90874, 'author_profile': 'https://Stackoverflow.com/users/90874', 'pm_score': 0, 'selected': False, 'text': '<p>The <a href="http://codinghorror.com" rel="nofollow noreferrer">Coding Horror Blog</a> regularly gives great ideas. Just some examples:</p>\n\n<ul>\n<li>Exploratory and incremental learning</li>\n<li>Self-documenting user interface</li>\n<li>Incremental search of features/Smart keyboard access</li>\n<li>Task-oriented design (ribbon instead of menus and toolbars)</li>\n<li>Providing undo instead of constant confirmation</li>\n</ul>\n\n<p>Another aspect: <strong>use scalable icons</strong> to solve the problem of multiple user screen resolutions without maintaining different resolution bitmaps.</p>\n'}, {'answer_id': 2767434, 'author': 'Zamboni', 'author_id': 174682, 'author_profile': 'https://Stackoverflow.com/users/174682', 'pm_score': 1, 'selected': False, 'text': '<p>I like to follow these 3 guidelines:</p>\n\n<ol>\n<li>Standard - follow known standards/patterns, reuse ideas from all products you respect</li>\n<li>Simple - keep your solutions simple and easy to change (if needed)</li>\n<li>Elegant - use less to accomplish more</li>\n</ol>\n'}]
['https://Stackoverflow.com/questions/42793', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1196/']