Related
Often times convention is one of the most important design consideration for user interface. Usually the advice goes to do it like Microsoft does.
This is for three reasons:
If it ain't broke, don't fix it.
If your users expect to click on a floppy disk icon to save, don't change the icon (even though some of them may have never seen an actual floppy disk).
Users don't want to re-learn the interface (and hot keys, etc.) with each different application they use.
At the same time Emmerson said "*A foolish consistency is the hobgoblin of little minds.*" So when does maintaining a consistent user interface cross the line from a good idea to stagnated innovation?
Microsoft shook up the good old WIMP GUI with the introduction of the tool bar, and then again with the Ribbon control (which is the natural evolution of the tool bar, like it or not.) Now we are seeing ribbons everywhere.
So my question is, what are some user interface paradigms that are accepted and consistent across multiple applications, but have stayed past their prime and are starting to reek? Are there some important changes that would benefit from a grass roots push by developers to innovate and improve the user interface experience for our users?
One thought that came to mind for me is the modal pop-up dialog. You know the ones that say: "Are you sure you want to . . .. - [Yes] [No] [Cancel] [Maybe]" and its evil twin "Successfully completed what you wanted to do! [OK]." We are seeing a movement away from these with the "info panel" in browsers. I think they need to be adopted in windows application development as well.
If possible please list a solution for each stale UI item.
And please don't list clippy. We all know he was a bad idea.
NOTE: This is specifically Windows client user interface paradigms, but I am certainly open to drawing inspiration from the web, the Mac, etc.
You mentioned popup modal dialogs , and I'd argue that non-modal ones are just as bad. Any dialog box remove focus from the program, they could end up behind the program and make it hard to find it, they might not even appear on the same virtual screen.
I'd like to see an end to all dialog boxes. If you need to stop someone from using the UI because of some non-normal circumstance, then remove the relevant parts of the UI from the window, and replace it with what the dialog would contain. Bring back the UI once the problem has been handled.
Clicking things on touch interfaces
It's incredibly difficult to click on things on a touch interface, because you don't know when you have pressed the screen hard enough. And if you add an animation to the button you are clicking, you most likely wont see it, because your finger is in the way. Adding other reactions, like vibrating the phone or painting waves on the screen might work, but there is usually a delay which is too large, much larger than the tactile sense of a button being pressed. So until they invent a screen with buttons that can be pressed, all touch devices should move towards dragging user interfaces (DUIs) instead.
Counter intuitively it is easier to press an object on the screen, drag it, and then release it than it is to just press and release it. It's probably because you can see the object moving when you start dragging, and you can adjust the pressure while dragging it. Dragging also has a lot more options, because you now have a direction, not just a point that you clicked. You can do different things if the user drags the object in different directions. Speed might also be used, as well as the point where the user releases the object. The release point is the real strength of DUIs, because it is very easy to release something, even with pixel precession.
Some designs have started to use DUIs, like (here we go) the iPhone, palm pre and android phones. But only part of their design is DUI, the rest is clicking. One area they all have in common is the keyboard. Instead of clicking on a key the user presses any key, then drags their finger towards the key they really wanted to click. Unlocking these phones also uses dragging.
Other easily implemented DUI features would be things like mouse gestures, where dragging in different directions, or drawing different shapes does different things. There are also alternate keyboards being researched which puts a bigger emphasis on dragging. All buttons can be changed into switches, so have to drag them down a bit to click them. With a well designed graphics, this should be intuitive to the user as well.
The Apple Human Interface Guidelines are a good read on this topic. They discuss this from a very broad point of view and the guidelines apply to any platform, not only Mac.
The file system. I want to save a file.. >OOOPs I need to think of a file name first. Well.... how about ... blah.doc.
6 months later...
Where the %#*(%& * did I save that %()#*()*ing file?
The solution is build a versioning system into the application, or better, the OS. Make files findable by their content, with a search engine, instead of forcing the user to come up with a memorable name, when all they want is for their file to not get lost.
Eliminate the save step. Type something in to the application, and it's just there, and there's no risk of losing it by some misstep, like forgetting to save. If you want an older version, you can just pick a date and see what the document looked like back then.
To build on the search engine idea: It's a pain having to navigate some arbitrary tree structure to find your stuff. Searching is much easier. However, you might still want to have something like a "folder" to group multiple files together. Well, you can build a richer metadata system, and have a "category" or "project" field, and setup the search engine to show items by project, or by category. Or group by those, or whatever new UI discovery we make next.
This question is a bit too open-ended, IMHO.
However, my main approach when designing anything is:
Fits in to wherever it is. If it's a windows app, I copy MS as much as a possible
It's simple.
It provides options
Buttons have a nice description of what the result of clicking will be, as opposed to 'yes or 'no'
Harder to answer the rest of your post without spending hours typing out an arguably useless (and repeated) set of guidelines.
In my mind, the one thing that really stands out is that USERS need more and easier control over the application's user interface appearance and organization.
So many interfaces can not be modified by the user so that the most used/favorite functions can be grouped together. This ability would make your favorite software even easier for you to get things done.
Error messages need a "Just do it!" button.
Seriously, I really don't care about your stupid error message, just DO WHAT I TOLD YOU TO DO!!!
I think the entire Document model of the web needs to change. It's not a user interface, but it leads to many, many bad user interfaces.
The document model was a good idea to connect a bunch of documents, but now the web is also a collection of applications. Today, I think the Page/document model corrupts our thinking. We end up lumping things together that aren't related, modularizing our code wrong, and in the end confusing users with our monolithic control board type websites.
Find dialogs that sit over the widget in which you are doing the search are terrible. Loads of apps do that. The find bar in Firefox works much better.
Many applications have multiple panes within the UI - eg in Outlook there's the preview pane and the inbox pane (amongst others). In these applications typically cursor key presses apply to the currently focussed pane. But there's very poor hinting to show the user which pane has focus and there are seldom keyboard shortcuts to move the focus between panes.
The focussed pane should be highlighted somehow.
Something like alt+cursor keys should move the focus around.
Ctrl-Tab and Ctrl-Shift-Tab cycle left and right through tabs instead of MRU behavior, even though in most cases the same behavior is duplicated with Ctrl-PageUp and Ctrl-PageDown.
There are a lot but here's an idea for a couple of them:
Remove some clicks like in "add another" or "search item" and the like.
This is well done with interfaces like ajax which have autocompletes ( and auto search ) but is slowly being adopted for platform UI's ( and in some cases they were originated in platform UI's. )
This is how StackOverflow does it for some scenarios.
But of course, we all know that already don't we? No need for "Seach tag" or "Add another tag" buttons, they just happen
Dialogs as you described.
Guys at Humanized proposed Transparent messages which actually are used in their product Enso and some other places.
Mac uses them for notifications ( like in Growl ) use them very well, or Ubuntu new notification system.
alt text http://blogs.sun.com/plamere/resource/NowPlayingGrowl.png
Firefox replaces the traditional "Search" dialog box with a search bar at the bottom.
Although not everyone likes the placement for next/previous as in this screenshot
And even SO ( again ) :) replace the notification with the yellow bar.
Finally:
File managers
I really like ( sometimes ) the simplicity of regular file managers, but some times I would like to work faster/better with them.
If you compare IE 4 with IE 8 you can tell the advance ( even better compare IE 4 with Google Chrome )
But if you compare Windows 95 Explorer with Win XP they are almost the same!! ( Win Vista/7 is a step forward )
But I wonder: Why haven't file managers improved as much as webbrowsers?
That's one reason I like stuff like QuickSilver but it is just a step. Much work is needed to create something like a "Perfect program launcher" or (FileManager/DesktopSearcher etc as you wish )
QuickSilver featuring "move to" action
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I'm working on a project where the user is able to save their work (most likely to the HDD but also possibly any other media, including floppy disks). Sure, the popular File > Save option is there but what about a toolbar button?
By far the most popular icon is the floppy disk. However, the chances the user will write to the floppy are pretty slim. Still, I think the floppy is more representational than literal.
In the end, I'll probably stick with the floppy disk icon to keep the convention most users are familiar with but... anybody have any ideas on how to update this old icon?
The floppy disk icon has become the standard for saving files. It's a highly recognizable icon and there's no reason to change that. Consistency between applications is a wonderful thing.
I suspect that over time the icon will grow more stylized and less like an actual floppy disk once people start forgetting what they look like (or never knew). The icon nowadays represents the concept of saving more than it represents floppy disks anyway.
As others have said, keep the floppy icon and don't worry. Where I live, this is the warning sign for train crossing:
There haven't been any steam locomotives for 50 years or so, but everyone still knows that this is the symbol for trains. And in the same way, 50 years from now, when your files are stored on Google servers in orbit, everyone will know that the floppy is the symbol for saving your data.
Consider the fact that you're using the term "floppy" when in fact the 3.5" disks were not floppy at all. It was just a term that carried over from 5.25" disks because everyone got used to it. The "disk button is save" concept is also what everyone is used to. Stick with it.
Chapter 17: "Rethinking Files and Save" of About Face covers this. Alan Cooper is well-known as a usability expert and his writings are influential. His argument is essentially that when we force the user to think about the implementation, we get ourselves into trouble. Here's a brief excerpt:
In the world of digital technology,
the place where implementation-model
thinking most strikingly rears its
ugly head is the management of files
and the concept of "save." If you have
ever tried to teach your mother how to
use a computer, you will know that
difficult doesn't really do the
problem justice. Things start out all
right: You start up the word processor
and type a couple sentences. She's
with you all the way -- it's like
writing on paper. But when you click
the Close button, up pops a dialog box
asking "Do you want to save changes?"
You and Mom hit a wall together. She
looks at you and asks, "What does this
mean? Is everything okay?"
This problem is caused by software
that forces people to think like
computers by unnecessarily making them
confront the internal mechanisms of
data storage. This isn't just a
problem for your mother; even
sophisticated computer users can
easily become confused or make
mistakes. People spend thousands of
dollars on hard- ware and software
just to confront impertinent questions
like "Do you really want me to save
this document that you've been working
on all afternoon?" and must remember
to use to the Save As... command when
what they really want to do is work on
a copy of the document.
It's worth thinking about ways to simplify or eliminate the "save" metaphor.
Here on Stack Overflow we can "Post an Answer" or "Add Comment" or "Ask your Question" for example. Each time we really are "saving" to the database, but the metaphor is slightly different each time. Posting, adding, asking. I think of software like iTunes which I believe does not have the concept of "saving to disk" for the music. You simply add music to it and it's saved. Depending on the type of tasks your software carries out, there may be different metaphors which are more apt than save.
I should mention that I've not really answered your question, I myself have used the floppy icon, or a big button that just says "Save" on it in my web applications. For the time being we're stuck with it for many cases, but it gets more and more ridiculous as floppy drives die out. But then, we also say we "dial" phones, when dial-interface phones have not been in popular use for decades.
Use an icon containing two characters:
:w
Look at your brand new cell phone's voicemail icon. There's a good chance it's still the 'tape rollers' icon from magnetic tape based home answering machines.
EDIT:
Okay, not all phones use the icon, but how about the word 'rewind'? I'm sure a few people out there have devices which allow you to 'rewind' a digitial audio or video media file.
If you think about it, mail has no "modern" representation either and is still represented by a paper letter.
(image from "It's Time to Change that Metaphor")
As mentioned in the blog entry "The end of an icon"
It’s dangerous to base a visual analogy on a moving target. Technology will change. What’s clear and obvious today won’t be in 10 years; so what’s nebulous today will be totally obscure in 10 years. The problem with the floppy icon (beyond the iffy analogy) is the generation gap.
Still, as long as the underlying action is clear, that icon will survive.
(image found in many places, including in this blog post)
Why do we even need a "save" function? Anything I write should be automatically saved, and in fact Microsoft Word does that already--if it crashes and haven't saved, your data is still recoverable. Google saves drafts automatically. Why do we still use the "save" paradigm?
Tango icon set have an arrow pointing down to a harddrive:
How about a reel tape drive like they had in the old Sci-Fi movies:
+-----+
|() ()|
| \ / |
| W |
+-----+
This icon would be timeless!
So long as most applications continue to use the floppy icon, most users will be familiar with it and your application will benefit from a familiar interface. In economics, this is known as a network externality.
When there's a problem with some code we say there's a 'bug' in it, even though the last time that actually happened was over 60 years ago!
You know, in 50 years, icons won't be needed. If you want to save your work, blink twice, or stand on your head, or just say "Save" in the language of your choice, and voila - it's saved... no need for a visual anymore :)
I vote using the standard 3.5" icon. When the day comes that it's confusing to users, developers will get plenty of complaints from users saying it's not "user-friendly" enough. As for now, we've been conditioned to look for that disk icon. I used an app once that used a CD icon instead, and it took me a few days to realize that it was used to save. It's all about design consistency and fulfillment of expectations.
If you deviate from the common icons for operations like save, your users are going to say your programs is hard to use. Even if you simplify everything so that you think it's perfectly intuitive and much better than what everyone else is doing, they'll say it's hard to use, just because it's not what they're used to and not what they expect. Remember, to your users, whatever Microsoft and the other big guys do is "correct," so if you're doing something different, you are, by default, wrong.
Besides, even if your user takes 5 or 10 seconds to figure out where the save button is, that's 5 to 10 seconds of easily avoidable frustration you could have saved them, and it's just one more barrier preventing them from being able to use your app. Obviously, they're not using your app to revel in the joy of clicking a chronologically relevant save icon. They simply want to avoid losing their work and get on with more important things in life.
Stick with the 3.5" disk; it's a financially sound, if creatively poor, choice.
Not really. As long as it looks likes the more modern "stiffy" rather than floppy.
Memory stick don't really have the same nostalgia. However as more and more modern systems don't include a physical stiffy drive, users of the future may not know what a "stiffy" stand for. As a teenager what a vinyl was and they might think your having a senior moment.
Picture of a Safe might imply that you are encrypting with some internal password and storing it so safe it won't be retrievable.
Picture of Server again givies the impression that its to be copied elsewhere.
Stick with the stiffy for the next 5 years
Cheers
I think this approach is on to something:
IMO, icons are useful because they're constant symbols we can associate with different actions. In that sense, the floppy is very appropriate simply because it is nearly universal. Never once in my life have I seen an interface with unfamiliar icons (no text at all) and been able to figure out what it does (I'm looking at you, Mac OS). I think even if you come up with an image that is more true to what is actually going on, such as a picture of a hard drive, you'll cause far more confusion than if you left it alone. Even if people such as myself can identify the icon as a hard drive, that doesn't tell us what you're going to do, it just means a hard drive is somehow involved...
Unfortunately this floppy disk icon has become the universal symbol for saving a document. It is even used in Microsoft Word 2007, virtually untouched. Change it in any way, an it is likely that you will make it unrecognizable to your users as a save symbol.
It's still in Windows' standard toolbar image list.
Nobody has seen a hard-drive, but that doesn't stop the icon from being one. To most users: a hard drive is that box on the floor.
It's the stylized symbol that is important. The picture can be a red cricket - as long as everyone associates that red cricket with saving.
Microsoft did a pretty good job of throwing out standard menus and icons in its 2007 office suite. Just about every average/beginner user just hates it for that...
To be honest, the floppy icon never made much sense to me. It means "disk activity", and it could be Save but Open as well.
The problem is that there is a new generation of users that have never seen a floppy disk (e.g. my 11 years of nephew) and he had to learn that that weird squared thing was Save.
I like the icon of a folder with an arrow pointing towards it. Maybe an arrow pointing to a cylinder (a la DB)?
I don't really like the other ideas a lot, so keeping the floppy icon is the default solution. Also, I hate the non-MS big low quality floppy icons some apps use.
Other solution could be a small version of the app icon with a hard drive and the arrow from the first to the second, but that won't look fine on a 16x16 icon.
What's clear is that icon design is science and art. I have a lot of respect for good icon designers.
Have you ever used HLSS? They use an image of a SD card as a save icon, yet most of the time, I can't pick it out on the toolbar and have to go to File -> Save to save.
So, they present an alternative modern equivalent, yet it doesn't work as well as the ol' 3.5" floppy icon.
Users using your application will find it more usable if you use a floppy disk icon. For consistency, if it makes you feel better. It's ubiquitous.
I think the nostalgia is neat - everybody knows what it means. I just took a quick look and Outlook still uses an old-school honkin-huge handset icon to make a call.
Great question. Of the 4 computers I actively use, only 1 even has a 3.5" drive. It is an antiquated technology that I, for one, wouldn't mind seeing replaced even in icon form.
Possible replacements:
a vault icon. Easily recognizable and symbolic of saving.
a compact disc symbol. More modern but still capable of being outdated soon.
???
I'm surprised at most of the responses here. The general consensus seems to be "keep using the floppy since that's what has always been done." Since when has the programmer mentality been to conform to everyone else's ideals? Doing something just because "That's the way it's always been" is no excuse, especially for coders.
You could use upload and download (red up and green down arrows) icons for saving and loading. Besides, in a short time network will be most place to save files.
Even though many people won't recognize what the icon actually is, they will quickly learn what it means, so I would keep it for consistency with other apps.
In the future, I think the question will become moot as more and more apps will avoid "Save" actions and save each user action automatically. Instead of discarding changes by not saving, people will use "undo" as the dominant paradigm for discarding changes.
It's funny that I found this discussion because I was looking for a standard 'save' icon I could download to replace the 'new and improved' icon that UtlraEdit started using and which was too difficult to pick out on the toolbar. Yes, it is outdated, but everybody recognizes the 3.5" floppy disk image as representing 'save'! Yes, programmers should not be doing things because 'that's the way it's always been done' but icons are language and not methodology. Don't invent a new word just because it would be cool unless your aim is to hide what you are saying from the previous generations.
I think in general the floppy disc icon has become the accepted save icon, even if it doesn't have much bearing any more with flash memory and DVD's being pretty ubiquitous. Frankly, if a program had an icon for saving that was something like a memory stick or HDD, most users wouldn't be able to pick it out as the save icon.
As pointed out by others the floppy disk icon is embeded in peoples understanding of computer user interfaces as the standard visual representation of the act of saving something.
The use of the floppy disk icon is a reflection of the technology that was prevailent at the time and so represented something the average user could quickkly associate with the act of saving a file.
The fact that the action of saving is still visually represented by the floppy disk in spite of it's rapid demise in recent times demonstrates the strength of association between the icon and the act of saving a file. If one were to attempt tp change the icon one would need to choose an image which is
Easily associatable with the act of saving as the floppy disk already is
Likely to remain in use, or at least in recognition, long enough for a sufficiently high number of people to recognise it
While I do acknowlege that the floppy disk has certainly outlived it's usefulness as the primary storage media of choice, I don't see it's role as the save icon ending in the near future.
If the icon were to change I believe major OS and hardware vendors would need to support such a change, which I don't believe is likely as doing so would potentially alienate a large number of existing users
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
Many programs (often large ones, like MS Office, The GIMP, Maxthon) have a feature called "tip-of-the-day". It explains a small part of the program, like this one in Maxthon:
"You can hide/show the main menu bar by pressing Ctrl+F11"
You can usually browse through them by clicking next. And other options provided are "Previous", "Close", "Do not show at startup".
I think I like the way Maxthon used to handle this; in the browser's statusbar (down at the bottom usually, together with "Done", the progress-bar etc), there would sometimes be a small hint or tip on what else you could do with it.
As Joel Spolsky wrote in his article-series "User Interface Design for Programmers", people don't like reading manuals. But we still want them to use the program, and the features they could benefit from, don't we? Therefore, I think it is useful to have such a feature, without the annoyance of the pop-up on startup.
What do you think? Pop-up? Maxthonstyle? No way?
I really only like the idea of a "tip of the day" if it is displayed when I can't do anything else anyway. For example, when the program is loading a large file. Suppose it has to load some large amount of data when the program is first started. Along with the "loading" splash screen, show a small tip, and have it disappear when the program starts. It's simple, unobtrusive, and can sometimes be very helpful to some users.
I hate to bring up "World of Warcraft" as an example in a programming discussion, but it uses this technique when you first login. Here is an example loading screen. Along with the loading bar and a full screen piece of art, it displays a small tip at the bottom of the screen. Usually these tips lead users to things they can explore further (such as a settings window, character customization tools, etcetera). For example, "Pressing ESCAPE will bring up a menu that lets you customize the the look and feel of the game".
Above all else: allow the user to easily close the tips and stop them from appearing each time. Make every key close the tip dialog when pressed. Have two buttons: "Close Tip" and "Close Tip and Never Show Again", or something to that effect.
It must be easy to banish the tips---but when learning a new GUI, I use them often. If it's a tip at startup I usually turn it off after at most a dozen runs, but if tips are well designed this gives me a sense of the application space.
Ways tips could be improved:
Don't tip a user about a feature that user has used recently.
Making tips sensitive to context can be helpful (the new Vista bars are an example --- pause to get the vapors; I have just said something nice about Vista).
Tips that are unobtrusive or appear during otherwise wasted time are good.
Tip during loading screen is good, but it must be findable after loading is over. Some popular game, maybe it was Baldur's Gate, would give you a tip during loading, and then afterward you could go back and review the tips in your journal. So if you had a vague memory of a useful tip a few screens back, you could find it quickly, in the same place you were accustomed to look for other recent information. A 'recently tipped' item on the help menu perhaps?
Actually, I've never heard of Maxthon. But I actually like those as long as there is a checkbox to make them stop. I like the tips to actually tell me something interesting instead of something very obvious in the UI. But this is really preference. I don't think it is bad design to use them.
No - I dislike them pretty strongly. When I am starting a software application, I almost always have a specific task in mind. The TOTD just interrupts this flow and tries to get me to think about the software rather than the task.
This might not be a direct answer to your question, but personally, I like the way StackOverflow handles this. The badge system essentially acts as a manual, rewarding users for discovering and utilizing the functionality it has to offer. Granted, this isn't really an option for most apps but it works beautifully for StackOverflow.
I think this goes along with the issues against modals -- it's something in a user's way, despite how helpful it may be. Which is why the "Do not show at startup" is needed.
Though I've never used Maxthon before, the way it showed tips sounds like a really good idea. It's unobtrusive and entirely optional as to if users even have to pay them any attention.
IMO, it's not good idea to have a feature that has to ask the user if it should "keep quiet." ;)
And, while some tips can seem blatantly obvious, even these tips can still be useful to users that aren't quite as familiar. Those that already know it can just continue on with their day.
A tip is a good idea, users can discover things they didn't know they didn't know. But rather than using a pop up getting in the way of working, I like how World of Warcraft does it. They put the tip on the loading screen, when you have nothing better to do then stare at the progress bar anyway.
Norman Ramsey made some great points about how tips could be improved. My problem with tips of the day (and I'm speaking as someone who's implemented them in my own apps) is that they are not timely and a bit too intrusive. The typical tip of the day comes up when you start the program, and requires a button click to make it go away. When I actually see a useful tip, my train of thought is usually "I'll have to remember that when I do option ". Of course, it's forgotten by the time I get around to using . And clicking OK during program startup gets old fast, I'll usually disable the tips after the first dozen or so.
My suggestion would be to go the next step and make the tip of the day much more context sensitive. For example, if the program detects that the user is constantly going to Edit | Copy and then Edit | Paste, a good tip would be "Not for nothing, but CTRL+C followed by CTRL+V accomplishes the same thing" and tell them right when they are clicking away at the menu like a lost monkey, not during program startup. Oh, and don't interrupt their work by forcing them to click OK.
What I just suggested - is that what that damn paperclip dude used to do?
IMO Tip of the day (popup) is only within programs that have a certain level of complexity, that you use frequently. So when you open the program you learn a new trick that will help you.
Usually people either like it or hate it, so definitely have an option to disable it.
What I'm worried about with the other type is that it will go unnoticed, you wont believe the areas of programs people never look at.
Maybe put it in something like a "tool tip" (or down at the bottom like the OP described) and make it contextual. A few seconds after you change to a new mode it slides in some text about the current mode.
And YES make the OFF button easy to find!!!
Personally, I prefer software that’s simple enough to not need “Tip of the Day”.
Tip of the day can be good if it's
non-modal, and never in the way
has a "history" I can access
is context sensitive to what I do
Unfortunately, the crappy initial Office implementation Clippy of has completely killed the last idea.
So IMO a good implementation would:
Show up at startup
Make "don't show at startup" the obvious choice
Indicate (with an animation?) that TOTD is accessible from e.g. the toolbar
MouseOver the toolbar icon would give the title/abstract of the "current tip"
clicking on it would give me the tip, give forward/backward navigation through tips,
link to "show all tips" in the manual.
For a large tip database, a "related tips" link might encourage me to explore the manual
Context-sensitive
Later incarnations of Clippy were almost helpful actually: it was nonmodal and stayed out of the way not requiring interaction (the jumping around was attention-grabbing, though), and I remember a few instances where the suggestion was good - e.g. a keyboard shortcut for a command I had accessed repeatedly through the menu.
A simpler method could still be effective:
"Did you know... you can customize the print templates to look like a pie chart on LSD - the manual shows you how! [clickety]" on a print dialog
Did you know... I can remember your custom searches. Just click 'Goof/Barf/Hidden/Create Index for last Query' - and they'll show up in the 'Search' menu. They'll run much faster, too! whe working with a search/query form
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 10 months ago.
Improve this question
Have you ever been in a situation where a menu function you really really want to use but can't cause it's disabled or worse gone all together?
There is an argument for always leaving menus enabled and then display a message to a user explaining why a menu function can not be activated when they click on it. I think there is merit in this but maybe there is a cleverer way of addressing this issue.
I would be interested to hear what others think.
If you're refering to Joel's post Don't hide or disable menu items, he clarified in the StackOverflow podcast that he intended that there be information - not a dialog - telling you why a menu item wouldn't do anything:
So, the use-case I was thinking of was, you had mentioned that in the Windows Media Player, you can play things faster when you're listening to podcasts and so forth, and it'll speed them up. And when I looked in there, that was disabled. And I couldn't figure out how to enable it. And obviously the help file is no help--not that anybody reads help files, but even if you did you couldn't find the answer to that. And that was kind of frustrating, and I'd rather have that menu item be enabled and have it just tell me "I'm not going to do this right now because of the following reason. I refuse to do this."
As with most questions about usability, the answer is "it depends". It depends on the problem domain, the type of user, how critical the function is and so on. There is no single answer to your question.
I think the general consensus is, never ever totally remove items from a menu. Menus allow the user to freely discover what functions are available, but if those items are hidden or move around it does nothing to help the user. Also, moving them around makes it impossible to become proficient with the application since you have to constantly scan the menus for the item you want to select.
As for disabling versus enabling an item and displaying a dialog or message explaining why it's not something you can do, I generally prefer the former. However, if there's a function that a user can't reasonably be expected to intuit from the display, leaving it enabled is a good choice.
For example, if "Paste" is disabled it's reasonably obvious to most computer users that there's nothing to paste. However, if you have a "Frizzle the Bonfraz" menu item and the user may not know what a Bonfraz is or why they might want to enable it but can't, it's a good idea to leave it enabled at least for a while.
So again, it depends. If at all possible, do what you think is best and then ask your users.
To generalize it a bit (perhaps incorrectly...), which of these situations would you prefer:
To find yourself on an island with no boat or bridge in site. Of course, you could talk to the villager in town and he would tell you the magical word to make a bridge appear...but you had no idea that magic existed.
You see that there is a bridge; however, when you get to it, there is a sign telling you that the bridge is not open to use.
You see that there is a bridge and celebrate! When you get to the end of the bridge, it tells you that the exit is not open. They must go back.
Maybe I am biased, but I don't believe that leaving the menu options enabled and allowing the user to click on it is the best of idea. That's just wasting someone's time. There is no way for them to distinguish that the item is available or not until they click on the item. (Scenario #3)
Hiding the item all together has its pros and cons. Completely hidden and you run the risk of the user never discovering all these features; however, at the same time, you are presented with the opportunity of making your application 'fun' and 'discoverable.' I've always thought the visibility of actions is more suited to items like toolbars. A good example of that is in when in some applications the picture toolbar pops up when you click on an image...and disappears when you click on text. In general, I would say that something like this is best if the overall experience of your application lends towards a "discovering" and "exploring" attitude from the user. (Scenario #1)
I would generally recommend disabling the items and providing a tooltip to the user informing them how to enable it (or even a link to Help?); however, this cannot be overdone. This must be done in moderation. (Scenario #2)
In general, when it's a context-related action (i.e. picture toolbar) that the user can easily discover, hide the items. If the user won't easily find it, have it disabled.
Make it disabled but have the tooltip explain why it's disabled
It depends on the situation. If the menu item has applies in the current context but isn't available because of state, it should be disabled. If the context has changed so it no longer applies, it should be removed.
I've never really understood this myself (I don't program GUIs). Why even have menu items hidden or disabled in the first place? It is non-intuitive for most users who are looking for a particular menu option to find it disabled, or not even present.
Tooltips are also non-intuitive. If I'm moving my mouse across menu items, I'm not going to pause long enough to get a tooltip explanation. I'm more likely to become frustrated that something I expected to be accessible through the menu isn't there, or is disabled.
That said, I actually don't use GUI menus very often. I find the options available are often not useful, or are accessible in some more intuitive way, such as common keyboard shortcuts.
You can display the 'reason' in the status bar. Or even better, use a text that describes the action and contains information when such action is possible. For example, for 'Copy' menu item, the text in status bar would be: Copy the selected text. Note the 'selected' part, which tells the user that he needs to select the text to enable the menu item.
Another example in a tool I'm making, we have 'Drop database' menu item, but this action is only possible when you're connected to it. So, the text in status bar goes something like: 'Drop the database (only when connected)'.
I've always believed that you should hide as much as you can. (Your application shouldn't be any more complex than what the user can/should do.)
If you display a menu option that a user shouldn't be using, they may click on it, but think your application is broken because nothing happens.
That's what I think at least...
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 11 years ago.
What techniques do you know\use to create user-friendly GUI ?
I can name following techniques that I find especially useful:
Non-blocking notifications (floating dialogs like in Firefox3 or Vista's pop-up messages in tray area)
Absence of "Save" button
MS OneNote as an example.
IM clients can save conversation history automatically
Integrated search
Search not only through help files but rather make UI elements searchable.
Vista made a good step toward such GUI.
Scout addin Microsoft Office was a really great idea.
Context oriented UI (Ribbon bar in MS Office 2007)
Do you implement something like listed techniques in your software?
Edit:
As Ryan P 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.
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.
For example:
Would you like to save?
Yes No
Should Be:
Would you like to save?
Save Don't Save
There is a more detailed explanation here.
Check out the great book Don't make me think by Steve Krug.
It's web focused but many of the conepts can apply to anything from blenders to car dashboards.
Topics covered:
User patterns
Designing for scanning
Wise use of copy
Navigation design
Home page layout
Usability testing
He also has a blog called Advanced Common Sense
And some random UI related links:
- User Interface Design for Programmers by Joel Spolsky
- 10 Usability Nightmares You Should Be Aware Of
First Principles: Wilfred James Hansen
Know the User
Minimize Memorization
Optimize Operations
Engineer for Errors
Subsequent Expansions: Dr. Theo Mandel
Place Users in Control
Use Modes Judiciously (modeless)
Allow Users to use either the Keyboard or Mouse (flexible)
Allow Users to Change Focus (interruptible)
Display Descriptive Messages and Text (helpful)
Provide Immediate and Reversible Actions, and Feedback (forgiving)
Provide meaningful Paths and Exits (navigable)
Accommodate Users with Different Skill Levels (accessible)
Make the User Interface Transparent (facilitative)
Allow Users to Customize the Interface (preferences)
Allow Users to Directly Manipulate Interface Objects (interactive)
Reduce Users' Memory Load
Relieve Short-term Memory (remember)
Rely on Recognition, not Recall (recognition)
Provide Visual Cues (inform)
Provide Defaults, Undo, and Redo (forgiving)
Provide Interface Shortcuts (frequency)
Promote an Object-action Syntax (intuitive)
Use Real-world Metaphors (transfer)
User Progressive Disclosure (context)
Promote Visual Clarity (organize)
Make the Interface Consistent
Sustain the Context of Users’ Tasks (continuity)
Maintain Consistency within and across Products (experience)
Keep Interaction Results the Same (expectations)
Provide Aesthetic Appeal and Integrity (attitude)
Encourage Exploration (predictable)
To add to your list, aku, I would put explorability 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.
Also, for applications that are more process-oriented (rather than data-entry applications), I would consider implementing an interface that guide the user a bit more. Microsoft's Inductive User Interface guidelines can help here, although you need to be very careful not to overdo it, as you can easily slow the user down too much.
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.
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.".
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.
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.
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.
This is a good goal: make things obvious. So obvious that it never occurs to the user to do the wrong thing. 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. Don't make them think.
Another principle: if the user does make a mistake, it should be very easy to undo. 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.
I've found UI Patterns 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:
The problem the pattern solves
An example of the pattern in action
Sample use cases for the pattern
The solution to implement the pattern
Rationale for the solution
If you implement a search, make it a live search like what Locate32 and Google Suggest does now. I am so used to not pressing "Enter" at the search box now.
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.
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 still loading.
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?".
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 only 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.
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.
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 About Face 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...
One other thing, keep your user interface as simple and clean as possible.
Here is a great DotNetRocks podcast episode where Mark Miller talks about how to create Good UI; 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.
Here is an episode exerpt
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.
I like to follow these 3 guidelines:
Standard - follow known standards/patterns, reuse ideas from all products you respect
Simple - keep your solutions simple and easy to change (if needed)
Elegant - use less to accomplish more
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.
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.
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.
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 often.
I will also recommended the book Designing Interfaces by Jenifer Tidwell published by O'Reilly
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.
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.
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.
If your UI involves data entry or manipulation (typical of business apps) then I recommend affording your users the ability to act on sets 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).
Sung Meister mentioned Mark Miller. You can find some of his blog posts regarding great UI on the Developer express blog. Here's a screencast of his Science of great UI presentation: part1 and part2. (both require Veoh player).
You can also find him on dnrTV: Science of great user experience: part1 and part2.
Here's a google techtalks about user experience by Jen Fitzpatrick.
Cheers
When using a dropdown, the default dropdown height is usually too low (default is 8 items for winforms, for example).
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.
In fact, I see little point in not using all the available space !
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:))
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.
For more, you might want to check out easily digestible ui tips for developers.
The Coding Horror Blog regularly gives great ideas. Just some examples:
Exploratory and incremental learning
Self-documenting user interface
Incremental search of features/Smart keyboard access
Task-oriented design (ribbon instead of menus and toolbars)
Providing undo instead of constant confirmation
Another aspect: use scalable icons to solve the problem of multiple user screen resolutions without maintaining different resolution bitmaps.