Tag Info

Hot answers tagged

278

It's a shame no one has mentioned the impact of the Mac OS X "Aqua" interface on all this. Aqua was the name Apple gave to the user interface style it introduced in Mac OS X. It changed the Mac's software from looking like this: …to looking like this: Here's Steve Jobs introducing it for the first time at MacWorld San Francisco 2000. As he says: ...


223

Persona Meet Carlos. He is an academic course-coordinator in a university. He is a very busy man who spends most of the day in front of his computer. User Observation As Carlos goes on about his daily tasks, every half an hour or so he checks the time. Reasons vary: How long has he got before the 11:00 meeting? How long before lunch time? How long ...


159

It's a big part of Skeuomorphism vs flat design, a debate about which Sacha Greif has a good writeup. Skeuomorphism like gloss, reflections and textures make things look like “real” objects, but all the fancy can increase cognitive load, and gives an unfortunate “samey” feel. The majority of iOS icons have the same or similar gloss effect on their icons, ...


138

Almost all of the testing I've managed has proven that content delivered via carousels are missed by most users. Few interact with them and many comment that they look like adverts — we've witnessed the banner blindness concept in full effect. In terms of space saving and content promotion, a lot of competing messages get delivered in a single position that ...


122

Screen digits are right aligned to maintain positional consistency between what a number represents (in base 10 that would be units, tens, hundreds, etc.). E.g. If I were to have 764 and then multiply it by 24, the answer would be 18336. By aligning to the right I've consistently seen the same unit representation in the same position, and when I've had new ...


119

Carousels are effective at being able to tell people in marketing/senior management that their latest idea is now on the home page. They are next to useless for users and often "skipped" because they look like advertisements. Hence they are a good technique for getting useless information on a home page (see first sentence of this post). In summary, use ...


100

Luke Wroblewski wrote about this in Top, Right or Left Aligned Form Labels (April, 2007). In it, he references eyetracking data from an article by Matteo Penzo called Label Placement in Forms (July, 2006). Matteo drew several conclusions from this study, including that right-aligned labels have a lighter cognitive workload for users: Alignment of ...


79

An interesting read by John Gruber on the shift away from skeuomorphism makes the argument that increasing pixel density resolves some of the issues that gave rise to certain skeuomorphic practices like shadows and gradients: The trend away from skeuomorphic special effects in UI design is the beginning of the retina-resolution design era. Our designs no ...


72

You're introducing two big problems right off the bat; breaking conventions and clashing styles. Don't forget that Apple and Microsoft have released different interface guidelines for their respective platforms : Windows UX Guidelines and the OS X UX Guidelines. Using conventions is important and helps users work in your app without thinking (Don't Make Me ...


72

I believe the going name for it is a Hamburger Menu, as a reference to the icon that's commonly used for it (, similar to the Unicode character ≡ U+2261 Identical To), and to the stacked nature of the drawer itself. Hamburger Drawer and Hamburger Sidebar would also be recognizable terms to the UX community. A bit of discussion on what I believe to be the ...


66

I would go with this kind of UI, reasoning: Users only select the dates that he/she is applying leave for without having to think about first day of leave and first day of work. Leave balance is not displayed on the same screen as it might get too cluttered and might confuse the users. For "leave balance" checking, I would suggest to make it accessible ...


65

Option 3 with no intrusive validation. 1 sucks because it's out of the norm. Copy and paste may or may not work. Tabbing to the next field may or may not work. People are good at correcting mistakes and the limited fields mess up their muscle memory. For example I might type 1912 When I meant 192 My fingers will nearly instantaneously correct ...


63

These dots, referred to as an ellipsis, always mean that there are additional options. For example when you see "Print..." it is indicating that there will be another step before there is anything sent to the printer. Taken from The Microsoft UX Guidlines: Design concepts Using ellipses While command buttons are used for immediate actions, more ...


62

You definitely should not make users learn new patterns (especially only due to personal preference). I think the right way to go is to follow the common practice, and I believe (please correct me if I'm wrong) the common practice in this case is using asterisk. You will, definitely, find other patterns in various applications, yet in this case, I think ...


59

Designers When it's your working version and you just want some text in there to visualise the overall page balance, and you'll only share it with other designers, then using Lorum ipsum should probably be fine. End users For end users, I would suggest using some other real example text. Yes, you'd have to localise this, but it's quite easy to simply ...


58

Selected – Create an inverted selection state which would make this feature more prominent. Many ways to accomplish but as an example; Make the button background black with a white or light grey pencil icon. Enabled – Increasing the contrast. Our eyes become less sensitive to light and see a narrower section of the colour spectrum as we age. Increasing the ...


57

A couple of other options: An X that is styled differently. X is an easily-recognized symbol for both actions. I think any confusion mainly arises from the fact that you are using the same style for both, creating the expectation that both will perform the same action in your interface. If you had, for example, a red X with slightly different ...


52

People don't generally use hierarchical structures 'in the real world' -- it seems to be something that has been forced upon them, a technical remnant of the past. What needs to be understood is the way that people recognise and organise things. Our brains don't work in a hierarchical way (without generating a lot of heat). Instead, we recognise things by ...


49

Not A Standard The usage of the asterisks as an indicator for a modified in-memory change is something that appears mostly on the Windows platform. Mac and Linux have not been too quick to follow this, but there are a few multi-platform editors that do use it. The asterisks is used when the UI element (title bar or tab) is capable of displaying only text. ...


46

In all the testing I have done, home page carousels are completely ineffective. For one, anything beyond the initial view has a huge decrease in visitor interaction. And two, the chances that the information being displayed in the carousel matches what the visitor is looking for is slim. So in that case the carousel becomes a very large banner that gets ...


46

contrast Your icons are lacking discernible contrast--both between the icon and the background, as well as between the active icons and inactive icons. Increase the contrast.


42

As a user I find carousels faintly annoying: Most have usability fail which I fall into the categories described in this article: 5 Big Usability Mistakes Designers Make on Carousels No ability to bookmark a particular item on the carousel, for example take a look at the BBC News photo carousel they use: http://www.bbc.co.uk/news/world-africa-14619799 ...


42

This largely a question of design trends, but there are some UX aspects to it. Glossy icons and buttons were (arguably) mostly used to show affordance. It was also then used almost religiously in all Apple designs. Even today, most iOS icons are glossy by default. People don't neet to be shown some gloss or gradient to know that they can interact with ...


41

Just because your brand color is red doesn't make the use of red for errors obsolete, it's just a matter of extent. Take the Viaplay signup form for example: Viaplay has red as their main accent color, which is used throughout the website for actions buttons, icons, header, graphic elements etc.. however, in the form they do tone down the use. They ...


40

Arrows have been an indicator of direction for so long that it's hard to say for sure, but my guess would be that an arrow fired from a bow only has one direction it can go, lending ease of communication when direction is needed. And since bow & arrows have been around long enough, and in practically every culture it has basically become universal. ...


39

I do not use or suggest the use of carousels. The changing of images can distract users when they read text on the page. You might find some interesting information at http://digitaleskimo.tumblr.com/post/752912498/image-carousel-appropriateness http://blinkux.com/insights/newsletter/usability-highlights-2008/ does not dispute the use or causeless, but ...


38

A save button should always save everything. Accidental data loss is about the worst thing that can happen to users. This is why many applications (e.g., GMail) don't even have save buttons; they just auto-save everything. If technically feasible, auto-saving is an even better solution (as long as there is an effective undo). Note: when auto-saving, it is ...


37

The users experience in your application should fit with the experience they have come to understand and work within in their chosen (or forced upon) OS. They have built laws and rules of interaction on that experience, for good or bad. A major drawback with designing an app to look more like OS X UI than Windows 7 or Vista UI is that the overall look and ...


37

Is the arrow symbol truly universal? The United States launched two spacecraft in 1972 and 1973 with a message for any alien species that might encounter them. The message was specifically designed to be universally interpretable. It built up it's own number system from scratch using the fundamental properties of the Hydrogen atom. The goal was to ...


36

Progressive disclosure Deferring advanced features to a secondary screen is one of the best ways to satisfy the conflicting requirements of power and simplicity. This is called progressive disclosure. You seem to be aware of this. Intimidating users An example of progressive disclosure is a search box. The search box typically contains a link to an ...



Only top voted, non community-wiki answers of a minimum length are eligible