Users love to provide their input or adjust settings as easy as possible
Start with collapsed options? > Choose date of next month > Get jumping interface
It’s really fundamental, that you do not change your interface layout regarding the position of input fields or check marks, while your users try to edit these. It will absolutely confuse and sometimes tease them. If there is e.g. a day marked „3“ like in this case in the calendar of OS X, and the users tries to choose this very day „3“, why should the interface jump to „31“ after a click? Just ask yourself if this result makes sense in case someone wants to choose „3“ and you know where to go. At the moment it’s like a small jump and run: Come on, try to hit the „3“!
You should always think about a fluid, smooth workflow, and good UX based design avoids jumping elements.
Besides: if there is a kind of editing mode in your interface and this editing panel is quite small, there is absolutely no need to offer only a selection of all settings at first glance. Most users want to setup their specific input or choose options quickly. The faster this entry can be completed, the better it is for the user experience. It’s needless to prevent your users from accomplishing their intention.
Offer basic functions at a glance and not as a bonus for unexpected, random user interaction
Confusing order in unspecified categories > long press „grid“ to get alphabetical list of segments!
Why should your users expect a different command from pressing a grid icon, like in Apple’s system preferences window, other than showing the displayed elements as a grid of symbols? There is no reasonable answer to this but the diagnosis that he should not expect anything else.
Hows wrong, the user or the interface, if you long press this grid icon randomly, now – which might take some years to happen, like in my case – and you surprisingly will get a well sorted alphabetical list of all segments.
That’s even more amazing, since the icon itself will not change it’s appearance instead!
So to design a proper user interaction you should not show a distinct icon-button for a linked function and cover it with an additional elementary command which can only be accessed with a completely unconventional action. As the window size is fixed in this case, you will not interfere with the „clean“ design instruction of Apple, which by the way seems to overrule a good user experience again and again. If you want to avoid a second button, just add some kind of switch so you can choose to get to the grid or the list view. What no user will expect is a kind of long press effect, because there are no other long press actions applied to the other 99.9999% of all buttons of this OS (as far as i know, i did not see a second one so far).
If you use an icon-button, just link it to one corresponding function – or change the icon of this button if it acts as a switch between different commands
Another interesting aspect is the missing description of categories here. Did you ever try to understand what they could represent? Any idea what users & groups have in common with date & time? So if you want to design a good UI, try to name all groups if you choose to sum up elements in different categories.
If you get excited about elements in the real world, do not use them as a one-to-one metaphor in UI design – form follows function and not vice versa.
We need 4 buttons, but are stuck with traffic signs – even if the color code does not make any sense
We all experience traffic lights every day, but it’s quite a very astonishing metaphor, to be used in the very basic operations of OS X (for years), now. While traffic lights regulate the movement of persons and vehicles, there is absolutely no corresponding association possible to assign operations regarding opening, closing and resizing windows and panels of programs to this regulation. They simply do not move at all, if they do you should check your system. While the red color may be a good idea to guard users from an undesired closing of the window, the image dissolves for the other actions you can take here. Why should an enlargement of a window be a favorable, green action? And why should the deposition of the window in the dock be a transition to close the window, as orange indicates in case of a traffic light? Finally there is no meaningful reason why anyone should somehow rate these actions with red, orange and green.
And this image will completely fall apart when you realize that there is the necessity to implement 4 instead of 3 user interactions. Now you really should not stick to your patchy metaphor anymore.
Let’s have a look at the functionality of e.g. the green button itself – which doesn’t show that it differs from the other ones. For example you can choose between enlarging your window to full size mode with a normal click (a lot of users struggle to leave this view later on, as the toolbar disappears, too).
Actually the small arrows will change to a green plus-icon, while pressing the option key on the keyboard. But the green button does not imply this at all? And what do you get when you click on this plus-icon button? In any program, but the Finder, it turns out that this action will show a kind of more convenient alternative full size view, enlarged horizontally and vertically nearly to screen size, still showing the menu bar at the top. It’s more convenient, because it is easier to leave again, as you can find the buttons instantly. But there is an inexplicable difference in the OS X Finder, as you will only get a somehow vertically enlarged window there, but why? I guess, no one knows…
Do you know how to minimize the window, now? Oh no, do not click the minus to the left of the green button, as untrained users instantly would expect it to be the second part of the opposite pair (You can put your brain at rest, trained users still fail, too). If users do not act like you want them to, it’s not the users who are dull. It’s a lack in UI/UX design.
Don’t get stuck on malfunctioning ideas. It’s better to start with the functionality first and subsequently find a consistent, and distinct design idea. When you start with a fixed visualization, you may already end up in a contradictory functionality in the very basic interface operations.
Introduce new incorporated and maybe basic features (at least the first time) and mark active operations consistent
Finder after fresh installation > basically hidden new features > activated information / features
If you installed OS X El Capitan the first time (we did not switch to Sierra, now, as it needed 5 updates of El Capitan to work somehow stable in a professional workspace!), you will not get to see the long-awaited enhanced Finder functionality. You will furthermore never get to know it in case you don’t read Apple-independent articles online, replacing the missing “new features catalogue“.
So did you ever miss a breadcrumb or enjoy tab navigation in any other explorer or browser? Here we go, but why are they not highlighted with, for example by formatting them bold instead of regular when you open the menu for the first time?
And now take a look at the view section itself. The top four options are displayed using check marks. That’s great, you see which element is active at a glance. But take a look at the new features, it’s unnecessary extensive to judge if these options are really active or deactivated! Why did they replace an easy to see check mark, which actually works perfect at the top, with a vague text line in the same menu showing the same status in a different way?
Hence help people to get to know new features easily, maybe highlight them on first sight or let your users choose the first time they open the program if they want to activate these new features. At least use a consistent display for similar states of operations in one menu, like activated / deactivated options.
If you consider an input field, be courageous and display where it is, so users can easily insert their information
How to paste the number? > long press into white space > get additional tools, now.
It’s possible to forget things you already did just because the repetition is too rare. If you look at an iOS device you will see a clean numpad to dial call numbers. But if you copy a number e.g. from a text (you can’t copy it from the calendar event name, that’s weird), you will get stuck at least the first time you try to paste it here. Where is the input field, did the programmers forget it? You can press somewhere, but you still won’t see it! It’s crazy, but you have to know where to press and that you have to long press until the option to paste it appears on the screen. It’s like the room of requirement in Hogwarts, so functionality will only appear, when iOS is convinced that you really are in need of it. As soon as you insert the number you will get additional tools which were securely hidden from sneaky spies before.
So even in a very minimalistic design approach, take the chance to guide your users and help them accomplish simple tasks easily, without having to search the web for gratuitous answers.
Avoid chameleon-like menus, wich did not work since the early days of ancient GUI design (even if you really want to pay homage to Win 95)
The outsourced memory of commands > …requires your brain to remember changing options
It’s nearly impossible to remember a function which is not displayed in the menu. The first step to try to locate the function you are searching for is to check the menu, but what would you do if you can’t find it? Check the menu again with different keyboard shortcuts? But why should you design your menu like an adventure game, where you get to the next level only after finishing some unknown tasks in the first level?
If you really think your right mouse menu is already much too long, you should give a hint that there are some additional options which are different to other options as they cover additional – yet hidden – functionality. Look at the right mouse menu in Finder of OS X. It would be really simple to just place a small, tiny mark to the left of all operations or some dots to the right, which offer additional, slightly different context functionality. Or maybe you just change the font formatting a little bit again, but anyhow you should indicate that there are entries which are different from others, as they offer alternative options in conjunction with a shortcut.
If there are conditional commands integrated in your menu, just display this fact somehow in your menu. It’s not up to the user to guess possible conditional dependencies of entries. Your design should help people accomplish their tasks more easily than playing trial and error.
Display a link to a hidden content so it’s possible to be explored
Where is the missing setting? > hidden scrollbar reveals > settings and old entries
Where is this dubios option sitting to turn messages of at night in the notification center? Impossible to find if you forgot the forum where you once found the answer to that question.
When you plan to design a user interface, remember that your users are usually older than four years and do not tend to visit kindergarten anymore, a place where you would explore everything, anywhere and always. As people (which users belong to in the first place) get older, they trust more and more on their experience, called „learning“. One basic result of this learning is, that they expect less uncommon things the older they become. So if there is a red traffic sign, they will stop their walk as they believe in their life time experience.
On the other hand they will not expect e.g. a door when they stand in front of a strong, solid, concrete wall. It’s the same with an user interfaces. If there is no signal that there are hidden elements in a clearly outlined shape, then they won’t expect to find any additional elements there.
The decision to mask elements which are in your opinion less important involves to add some kind of additional element somewhere, so users can understand easily, that this element indicates this hidden information, which might get important to them at some special point and can be discovered by a click on this element.
This could be done by icons, text or other navigational elements and it’s possible to still maintain the idea of a clear design.
Keep the same content in your menu, as it is impossible to remember where commands vanished last and why (only if you still want to pay homage to Win 95 and think this was the best of all OS)
Where was the option to put a file into a folder > appears only with at least two selected files
It’s quite strange, if you remember a command but now you don’t know where to find it anymore. And it’s even stranger, that you think to exactly remember the location where you last found it and it’s not there, like visiting a broken dream.
It’s much better for the UX if options, which are not available at a given time, just stay there in a simple, inactive status and everything will be fine, efficient and coherent. Your users will love it.
Use an upgrade or redesign of your interface only to enhance things and just built up on proven ideas
Recently opened files menu (old iWorks-ixtract-infographic-lectures-part-8) > curious complex UI/UX in current iWorks-ixtract-infographic-lectures-part-8
For what reason would you need a start up dialogue other than to better open documents or to offer all options associated with creating or opening templates, last used and new documents? And why should anyone replace a two-click action with an interaction of four clicks additionally in a completely different place? If this does not make sense to you, i think you are absolutely right, and you shouldn’t do it at all. Good interface design minimizes necessary actions to accomplish simple and frequent tasks.
If you set up a kind of summarized actions dialogue, just offer all options connected with this issue. And if you already had that feature in your earlier version – yeah, keep it!
In this special example there is only clean, gray space left, where you once could enlarge the too small icons, or just open last documents quickly. It’s not a good idea to sacrifice functions for aesthetics in design. Design is about better, aesthetic functionality. This is even more important, as once removed, options will hardly get back in later updates.
Alerts will help users only, if they are escorted by reasonable actions on it, otherwise it’s like a nasty prediction of irreparable harm
Warning about missing fonts, easy to replace > warning but no chance to replace the fonts
Alerts are a basic necessity for users to get feedback for misleading actions or malfunctions (sometimes of the underlying code) before you tend to smash your precious work. It’s a small but very important reminder, that from now on, you should really be careful what you do, as it could irrecoverable destroy your documents hereafter. Especially as OS X will save changes while opening documents instantly, without any feedback and even if they are stored on network devices, which are not compatible to time machine.
Anytime you decide to warn your user about a misconfiguration or bad action, you should give them the chance to change these delusive things immediately, before you execute exactly what you definitely tell them not do.
Otherwise it will really harm your users…
Bonus 1. Be self confident and if you want to create a toolbar, then show it to your audience!
Is there an attachment to download? > click the invisible toolbar
Sometimes the obvious is covered because of overeagerness to design white space. Consider the 10th answer of an email with attachments in Mail. You will never know if there’s been added a new attachment, because some clients add attachments after all other content, and some clients inline but somewhere. It’s simply too little information in a header to deliver the message: There are attachments!
Does already the display of the number of all attachments disturb this overwhelming design? And if you want to download your attachments, you have to search for the toolbar in some place where you can’t usually edit anything, in the header of the mail. Does that seem to be a very straight forward design idea to you?
If you want to minimize something useful, please let anyone know that it is still there. Especially if a computer is still a basic tool for your users in their daily work, you should make things more easy for them to accomplish things and not stick to a self-satisfied design which is too precarious to offer all of it’s great and available functionality.
Bonus 2. Implement a new operation, but check out if it is really working like it should. Otherwise just leave it.
Finder with loads of white space instead of adjusted window size to fit the full filename
Opening a new Finder window in columns mode will offer an absurd column count and width. Instead of showing the full file name you get something unreadable and lots of empty columns which no one needs instead.
If you double click the – again – hidden resizing button at the last reasonable column, you want to force this column to adapt to the full name length – but see what happens: independent from the name length of all files, it just gets to a kind of average width, which is absolutely meaningless and will never reveal the full name length of more than one third of all names. You still can’t read the majority of file names as they keep to be shortened by distracting dots.
Provide only useful operations for your users.
Bonus 3. It’s good to provide an explicit editing mode for some forms, but it should cover all edits then
Edit notice with… > …deactivated editing mode > editing mode activated!
Why should any information be less important than others?
If you want to preserve someone from unwanted changes, apply this secureness to all information
Bonus 4. Consider the aim of your operation before you implement it.
Symbol grid view in finder > enlarge icons > useful order e.g. sort by name
The ability to enlarge thumbnails to get a better overview in this thumbnail mode of the Finder is great! As someone is trying to get a better overview, by enlarging the thumbnails, this is exactly the main motivation and what happens is the exact opposite. An enlargement will zoom the fixed layout, which has not been a good idea for years, now. When you want to resize the thumbnails, you wanna see as much as you can. So instead of moving the thumbnails to the right – out of sight – you expect them to readjust their position automatically at the same time, especially when they still would fit into the window.
Menu Mobile