The Stack Overflow podcast is back! Listen to an interview with our new CEO.

Questions tagged [gui-design]

Graphical User Interface design (GUI-design for short) refers to the visual aspect of designing computers, appliances, machines, mobile communication devices, software applications, and websites with the focus on the user's experience and interaction. Generally refers to digital rather than physical design.

Filter by
Sorted by
Tagged with
454
votes
21answers
80k views

Should a toggle button show its current state or the state to which it will change?

I have a quick question about buttons that toggle between two states. (Think Play/Pause, or Shuffle/Regular Play.) As the title says, should the toggle show it's current state or the state to which it ...
296
votes
15answers
48k views

Are carousels effective?

Go to just about any eCommerce site and the homepage is nearly guaranteed to feature a carousel - an auto-rotating panel, usually with some sort of small navigation, usually highlighting new product ...
86
votes
9answers
93k views

What is this side menu called that can be found in many multi-touch apps, and where does it originate from?

It can be found for example in the YouTube and Facebook app.
130
votes
8answers
22k views

Why might right aligned field labels be better?

For the longest time, I've used left-aligned labels in my forms, like this: I did this because I thought having the labels left aligned made it easier for readers to scan the list of labels. However,...
75
votes
2answers
36k views

What is the significance of the three dots “…” on menus and buttons and how to use them right?

Adding three dots after the title of items in a dropdown menu seems to be a common practice (as you can see on the picture of a drop down menu in Google Chrome). They generaly mean that there is "...
58
votes
5answers
48k views

What is the optimum button size of touch screen applications?

There was a not so recent blog post about the ideal button size of touch screen control sizes (sorry there is no link, the website is now a spam trap) that was based on the study form the MIT touch ...
56
votes
9answers
12k views

How to visualize the possibility of drag'n'drop?

My web application contains a list of elements, which can be sorted by drag'n'drop. How should this feature be visually represented to users?
31
votes
5answers
6k views

Should I use country flags in language selection fields?

My users can create content in different languages, and I need to provide an option to choose the language when they enter new content. Right now there are only 5 languages (en, fr, de, pt, es), and ...
44
votes
17answers
13k views

Should the OK/Cancel buttons be aligned right or centered?

Where should I put the OK/Cancel buttons on my dialogs? At the bottom centered or aligned right? I've seen both and I personally don't care, but I want to create a consistent look across my ...
50
votes
5answers
55k views

What are the best practices for tooltips on mobile websites?

What are the best practices for tooltips on mobile websites? I'm designing the mobile version of a website for customers' accounts (where they can see their latest bill and settings for their accounts)...
40
votes
8answers
27k views

Should hyperlinks be blue?

I've built a site where all hyperlinks have the default colors: blue for links, purple for visited links. They turn red on hover. I believe that always using blue for hyperlinks is a good thing, so ...
21
votes
8answers
22k views

How to indicate that specific sections of a page can be swiped

There are a lot of mobile UI design patterns that support swiping, and these are designed based on interaction and animation that indicate the behaviour. Examples include the 'swipe/pull down to ...
17
votes
6answers
4k views

Blinking, bouncing and flashing elements

I'm responsible for the UI/UX in a software development company. During my absence, some developers decided to implement a "bounce" effect on a button of a website that they think should have more ...
70
votes
12answers
9k views

What kind of design do users like the most at the time of this question, 'Flat' or 'Skeuomorphic'? [closed]

I have read multiple articles on-line that say that the era of Skeuomorphic design on the web is over, and that a new era of so-called 'flat design' is now the new thing for developers, but do users ...
60
votes
9answers
8k views

Adding a “none of the above” option to a list of checkboxes

I am working on a series of complex life insurance forms and trying to optimize using standard conventions... I have this nasty list of medical diseases and a mutually exclusive option, "None of the ...
12
votes
3answers
2k views

n-to-n selector UI [duplicate]

I am looking for a name of one specific UI element. I have unsuccessful tried to identify it before but this attempt failed. What I am looking for is an n-to-n selector where items move between two ...
380
votes
20answers
33k views

What explains the current shift from glossy UIs to matte UIs?

I've noticed an interesting phenomenon in the user interfaces of many famous applications, they're moving away from the glossy complex to a more dull and bare minimum design. Why the sudden change? ...
16
votes
8answers
12k views

Save/Cancel/Close button behavior question

The attached image shows a dialog with a save/cancel button bank and a "x" icon to close the dialog. The question I have is this. Should the cancel button even be on the modal if it does not clear/...
5
votes
2answers
2k views

What affords scrolling?

Besides the obvious: Scrollbar Touch interfaces (especially mobile ones) A sign saying "You can scroll here you know!" This for a desktop application.
17
votes
9answers
5k views

Scrollbar on the left

Is there a deep study that suggests to place a scrollbar on the right? Personally I move it to the left whenever possible (Firefox allow this, as well as xterm and emacs). I know that placing a ...
77
votes
9answers
21k views

How should you show that an accordion is expanded?

When you have an accordion, you need some way of showing the current state is expanded. There are a number of different ways of handling this, and each is used by a number of respected websites and ...
37
votes
8answers
45k views

Hamburger menu icons - should they be on the left or right?

Hamburger menus (the three small horizontal bars: the new menu icon). Should they be on the right or left? I'm only thinking of mobile and tablet applications. The pattern I see the most is on the ...
37
votes
11answers
7k views

Good reasons to use bad UI

When should we make a conscious decision to retain poor UI, even if temporarily? Not because of budget or time constraints but because of what I call the QWERTY paradox. In short, the QWERTY paradox ...
16
votes
7answers
1k views

Minimalism, Maximalism(?) or whatever?

Tufte & Nielsen believe that screen real estate is one of the most important asset for a (UX) designer. Utilize available screen space - Jakob Nielsen’s Alertbox: May 9, 2011 & The Visual ...
49
votes
6answers
23k views

What's the point of a “Read full story” button?

I've noticed a lot of news websites, particularly on mobile, sometimes will cut off their story with a button you have to click to see the rest of it. I can understand why they'd do this if they ...
40
votes
9answers
5k views

What are the drawbacks of designing a Windows application to look like a Mac application?

I'm working with a company whose product is a Microsoft Windows application. As the UI/UX designer (and as a Mac user) I want to redesign the application so it is more visually appealing. Are there ...
30
votes
3answers
4k views

What to do when a page's content doesn't fill up enough of a fixed area?

An application has a fixed size, i.e 800x600 px. However, a problem I often run in to is that the page's content isn't enough. It's simply too little content on a big area. Consider the mockup below, ...
11
votes
4answers
15k views

Multi-selection dropdown list implementation best practice

Many websites do not use multi-selection dropdown lists anymore, and the reason often cited by UX practitioners is that this UI element does not 'test well' with users. An example of what I am ...
14
votes
5answers
7k views

Where should form instructions or hints be placed?

I was browsing Forrst and came about a screenshot of a form designed with Twitter Bootstrap that had the label on the left, the input field on the right, and the instruction that it's required under ...
8
votes
4answers
18k views

What's the recommended max width for the main container and for the main column, for large screens?

Based on this question, "Why do many sites leave half of each webpage empty?" and its comments and answers, I did some research, but I didn't find a complete answer. For me it is obvious that it is ...
10
votes
3answers
3k views

Mixing rounded corners and square corners

The question of the usability of rounded corners versus square corners has already be answered here. My question revolves more about the consequence of having them intermingled. I've heard some ...
9
votes
2answers
3k views

(One to many) to many form?

What is a good pattern for displaying a form with a One-to-many-to-many relationship in a web form for data entry? One parent element (a case - 15 data fields) One or more 2nd level elements (...
6
votes
6answers
5k views

Two search bars on the same page or combination?

The main use of my site is video browsing. There is a search bar in the nav to search for videos. My site also has a photo section. I need to add search functionality on the photo section. I'm torn ...
5
votes
3answers
801 views

Usage of Golden Ratio [duplicate]

Possible Duplicate: Why does the golden ratio work? Or does it? How is that to use the Golden Ratio for the design of graphical interfaces. when I use it or should I? and on designing ...
45
votes
4answers
110k views

Which color scheme to choose for applications that require long work hours?

I'm working on a ERP / Accounting (lots of tables and data) web app and was wondering what color scheme would be appropriate for this type of application? Users will be sitting in front of their ...
92
votes
11answers
41k views

Should a button become lighter or darker on hover?

We're having a discussion in the office about whether a button should become lighter or darker when a user hovers over it. Here are some examples from the field: Apple "Buy Now" button (Second is ...
66
votes
13answers
16k views

Best UI to allow expert users to enter an ip address? (IPv4)

I am working on a web application which requires users to enter an IPv4 address (in dotted-quad decimal notation) for most of the primary tasks they need to perform. Our primary target "user" is a ...
38
votes
15answers
27k views

What is the difference between wireframing and prototyping

What is the difference between wireframing and prototyping? Am I right to think that prototypes should be interactive and wireframes should be static?
15
votes
2answers
23k views

Modern Alternative to Tree View for Hierarchical Data

There are other similar questions to this, but none of the solutions really fit my problem space. Breadcrumbs and drill-down menus are not the solution. So without further ado: The design problem ...
37
votes
4answers
3k views

Where should the GUI light source come from?

I know that historically the light source on GUIs is in the upper left, casting a shadow on the bottom-right of buttons and the upper left of fields. Now, I see some places (like Apple) use a top ...
30
votes
11answers
18k views

What's the least confusing UI for offering to either enter a URL or upload a file?

I have a simple form where a user may contribute a link or upload a document adding a title and optionally some notes. What's the best UI for allowing for either a URL or a file (but not both)?
26
votes
7answers
5k views

Placement of buttons for Previous, Next, and Save Draft actions

I am designing a five-step form. The user can exit the form and return to it later. So I have a Previous, Next, and Save Draft action. What is the ideal placement of the buttons/elements? I want ...
36
votes
6answers
6k views

What is the preferred behavior of form validation?

What is really the preferred behavior of form validation? When should the validation take place? When the user clicks "save" When the input field is out of focus As the user types Is the preferred ...
44
votes
7answers
2k views

Could scaring users be good UX?

I work on an application that's designed to be usable by new users, but has a lot of complicated configuration for advanced users. Our approach to keeping users away from delicate settings is to make ...
32
votes
8answers
8k views

Is there a recommended size for search boxes?

Do users change their search patterns if the search is shorter? Do users search less if the search box is too large? The only article I'd found is a 2009 Smashing Magazine article: The [Nielsen] ...
22
votes
2answers
9k views

Most intuitive multi-select component for the web

My target audience are users that are not familiar so much with computers so i try to simplify the UI elements in use as much as possible. For instance I try to avoid drop down menus and use big ...
60
votes
14answers
10k views

Is there a better character than the asterisk to indicate a modified document?

In Windows applications it seems to be a common way to indicate modified, unsaved documents with an asterisk * character. E.g. this is how Visual Studio .NET 2012 indicates a modified document: When ...
28
votes
5answers
3k views

Best way to handle long URLs

I have a list that contains long, in terms of character count, links and I am wondering if my solution is a good solution in terms of UX. My solution is that if the link is over 80 characters, then ...
18
votes
7answers
7k views

What are some reference works for capitalization in UI text?

I'm currently in the process of updating the language files for a large web portal. Over time, a lot of inconsistencies have crept in, and so in different places you might see contrasting: Titles > ...
10
votes
3answers
18k views

What is the difference between web design, interaction design, user experience design, and user interface design?

It seems all four of these branches of design relate to each other at one point or another, and one can easily be confused for another by novices or outsiders looking in. Job postings online ...