Hot answers tagged gui-design
159
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:
...
129
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, ...
56
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 ...
43
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 ...
38
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 ...
32
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 ...
27
It can work well, but I wouldn't recommend the method that you are proposing.
You can use breadcrumbs as a form of progress bar, which not only solves your navigation issue, but shows what still has to happen better than a pure progress bar. It is also common practice on some of the most used websites, so your users are likely to already be used to it.
...
23
Since this is a form, I would actually just provide two buttons inline to choose the image, and not a separate dialog or a set of radio buttons.
I believe this is actually better (in this instance) than having a single image button which opens a dialog to choose the option to then choose your picture. If you're choosing from your computer, the button on ...
23
You have a lot of information in that form - it isn't organized very well. Consider subdividing the form fields into logical groups that will help orient and guide the user (the HTML fieldset and legend tags work well here). Also, present a uniform visual style - right now your inputs are all over the place. Line up your form fields so that the user's eye ...
22
In general, using only color to indicate information is bad for accessibility reasons. Red/green colorblindness is the most common and occurs in 8% of males. Using an icon, like an X or warning sign, is the best way to go.
If you must differentiate color for business reasons (i.e. people at the top think it should be a different color), then pick one that ...
20
The big three gestures are tap, swipe/flick and pinch/reverse pinch.
These are the rudimentary motions that are inherent to the end-user for mobile devices. This is due to the early adopters of mobile technology incorporating these gestures in their proprietary software, conditioning consumers to use these motions throughout their devices. Thus, many ...
19
I can think of four broad techniques for tackling this issue.
Firstly, it looks to me that you could probably get away with increasing the size of your UI components and copy. Text really needs to be 14px or above to be well-readable anyway, so there are practical benefits to doing this beyond just aesthetics.
Secondly, if you feel a page seems 'orphaned', ...
18
I'd be tempted to tweak the layout slightly to avoid having lots of columns:
download bmml source – Wireframes created with Balsamiq Mockups
18
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 ...
18
Here's the thing about downvotes; almost no one downvotes. And another thing: some people downvote anything. Don't believe me? Check out this chart from when Youtube stopped using 5 star ratings:
For the most part people are much, much more willing to note what they like, not what they dislike, at least in simple rating systems (fully written reviews tend ...
15
You are actually asking how to ensure better interaction design while combining two elements which are not UX-friendly: tree structures and pagination.
1. Tree structures
Unfortunately, hierarchical trees are one of the most inappropriately used controls in the toolbox. They can be highly problematic for users; many people have difficulty thinking in ...
14
Instead of using colors, draw visual emphasis through other means, such as using danger icons, font weight, and/or jagged outlines.
Here's a an example, excessively using all three of these cues:
EDIT: The comments below suggest that I didn't make it clear enough in my original post that using all three of these cues together would be excessive. (I'd ...
12
The controls naturally reside next to the time bar slider. This slider is horizontal, so they fit best on top or on bottom.
download bmml source – Wireframes created with Balsamiq Mockups
Why put it on top in iTunes? Because toolbars and quick actions historically go there.
Why put it on bottom in Spotify? Because of hierarchy and our reading ...
12
As a brief bit of brainstorming on how to better present IP addresses to expert users, I'd choose a mix of options 1 and 3.
The way I would implement it would be remarkably similar to StackExchange's own tagging system, except instead of using a space key as a delimiter, I'd use a . so that as you type, it could bin your input into separate boxes:
It's ...
11
So, a few alternatives.
Emulating a "real" scrollbar while maintaining infinite scrolling
Emulation-oriented approach restore the usual scrollbars while still providing infinite scrolling. They're useful if the content actually has a reasonable end.
An image gallery like in the above example is such a thing, while a counter-example would be 9gag's "Vote" ...
11
To build on Benny's answer, which I really like, I think there's a natural mapping here. Cassette decks used physical buttons, which didn't work so well when you put them vertically. In order to put the buttons on the side, you'd either have to stack the buttons vertically or significantly extend your UI area.
download bmml source – Wireframes ...
11
One way to improve the effectiveness of the cutout is to enhance the difference between the 'figure and ground' and that can be done by adding a perception of depth using drop shadows to distance the overlay as a separate entity to the picture underneath.
For example:
11
Congratulations, you've invented TreeTable. Don't get me wrong, no sarcasm at all. The direction is right, but current implementation should be changed. TreeTable example:
BTW, your task is not new, so there are a lot of other real-life examples:
My biggest concern is flexibility. Naturally, there is no problem if you do not need to support some ...
11
I think a much easier solution for the end user, since you say the list of choices is the same for every row, is to have the table with the last column empty, and then a separate list somewhere on the page, near the table- not a dropdown but a list with all choices visible at a glance - where clicking a name will add it to the row automatically.
This way, ...
11
I suggest combining these:
chevrons on right (more natural, especially on touch, but no offense if you leave it on left) - of course, the whole bar should be clickable to expand/contract - not just the chevron
indent for the lower level
background color (lighter for lower levels)
shadow (to show that lower level is behind/below the higher one)
optionally: ...
10
If the user is expected to specify the amount down to the last cookie then a text field (or other discrete input control) would definitely be necessary. Trying to fine tune a value using an analogue control alone is a tedious task, as you also indicated, and should be avoided.
You can however find a combination of the two, maybe with some neat selection ...
10
As many other digital controls, this one probably originates from the cassette player button placement, where you mechanically pushed the audio head onto the tape on a cassette player. When the audio player was possible on a software, designers probably thought it would be a good idea to mimic the real worlds cassette players, which looked like this:
...
10
Jakob Nielsen said that removing the Reset (or cancel) button helps usability most of the time:
Because Back is such a strong behavior on the Web, it is usually not
necessary to offer explicit Cancel buttons. If the user asks for
something but doesn't want it, then you can be sure that it's Back
button time.
Offer a Cancel button when users ...
10
2007 article from NN/g Breadcrumb Navigation Increasingly Useful
Summary: One line of text shows a page's location in the site hierarchy. User testing shows many benefits and no downsides to breadcrumbs for secondary navigation.
Consistency is a key principle for UX design. If you implement breadcrumb for some pages and not for others, you are breaking ...
9
Perhaps you could use a balanced tree-like structure that grows outwards at the sides (alternately) as more people join the conversation.
Colour code it in vertical strips which each start as a new voice enters - like a piece of colourised vertically annotated choral music (a fugue?). You could maybe tail off a strip once that voice has had its last say so ...
Only top voted, non community-wiki answers of a minimum length are eligible
