Hot answers tagged

313

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: ...


227

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 ...


168

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, ...


150

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 ...


133

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 ...


123

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 ...


108

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 labels—...


102

If a user can't find an option or feature, then it doesn't exist There has to be some means by which a user who is looking for a feature can reasonably expect to find it, and by which users can browse features to learn what is available. Well-designed menus are really good at this. Clusters of related buttons and displays too, especially with tool tips. ...


96

There is no problem to work as a UX/UI designer, as choosing color is just a minor part of the usability process. There are lots of other activities that the UX-er should do, like usability testing, checking analytics, conducting A/B tests, writing reports. Choosing color is more like visual designers work. People often are confused between the two ...


94

Is not intrusive, and is barely noticeable. And Word users that are familiar with it, will recognize it easily, so you'll have some external consistency. Based on the comments, I edited this answer to note that is necessary to generate a difference between text and interpunct so I used a slighty bigger font size and changed the color from black to light ...


82

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 ...


75

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 ...


73

Basic users first I assume this isn't a color theory app. If this is intended to support quick color selection with a sub-set of power users, a hybrid palette chooser / builder will work well. Make ‘easy’ easy Start with a palette-based chooser with reasonably sized swatches that simplifies the user's job of making a fast selection. Google has ...


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

My go to has always been an blank, ␣ (␣) or the underbracket character ⎵ (⎵), which is wider. You can see them here on w3.org. I've used the underbracket a bunch in my programming courses to show space in program output. For example These␣do␣a␣pretty␣good␣job␣of&...


69

I'm not exactly sure how your app works, but from what I understood, I would use a color like grey for the OFF buttons and a brighter color (the primary color of the application perhaps) for the ON buttons to avoid your problem. Also I'd make use of icons to serve as an indication for Hot/Cold.


67

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 ...


67

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 ...


66

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 ...


66

Why not let the user decide? I'd simply have a toggle that enables/disables the auto repeat feature. I see two use cases: Someone is wanting a quick review of things that they have just learned (autorepeat is not really needed) Someone is learning new vocabulary and needs to absorb the nuances of each sign (autorepeat is very useful) I believe it would ...


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 ...


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 ...


59

An interesting question, and one that I think many of us might have pondered before without really diving too deep into the possible issues. From a purely design perspective, I can think of a number of plausible reasons: Convention: the first person did it this way, and then everybody else followed because "that's how it's done". Safety first: separating a ...


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 ...


55

I've been doing front-end work for a decade, and I have deuteranopia or deuteranomaly (red-green color blindness). It has never been a problem. I largely rely on color codes and location/proximity on color picker UIs to identify colors. When doing a design from scratch, I will often look at pre-existing palettes for inspiration. I will also use an ...


53

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 ...


53

Red can be used for ON, most sockets use this color when they are on : I would recommend BRIGHT RED for ON and DARK BLUE for OFF. The brightness difference between the bright red and dark blue will also indicate ON/OFF. Also use round shape because it resembles more with LED lights, used for power ON/OFF in many devices.


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 ...


50

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. ...



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