Skip to main content
Share Your Experience: Take the 2024 Developer Survey

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
565 votes
24 answers
141k 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 ...
Michael Brown's user avatar
306 votes
16 answers
54k 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 ...
Alex G's user avatar
  • 3,301
90 votes
9 answers
102k 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.
Lenar Hoyt's user avatar
  • 1,104
68 votes
5 answers
55k 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 ...
Michael Lai's user avatar
  • 27.3k
90 votes
3 answers
52k 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 generally mean that there is ...
Alex Fernandez's user avatar
134 votes
8 answers
26k 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,...
Bevan's user avatar
  • 8,311
58 votes
10 answers
13k 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?
Witek's user avatar
  • 952
32 votes
5 answers
7k 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 ...
iHaveacomputer's user avatar
58 votes
6 answers
66k 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)...
Sophie Lepinoy's user avatar
48 votes
17 answers
16k 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 ...
Jouke van der Maas's user avatar
45 votes
8 answers
40k 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 ...
Husky's user avatar
  • 573
30 votes
8 answers
30k 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 ...
Michael Lai's user avatar
  • 27.3k
16 votes
6 answers
6k 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 ...
Rdpi's user avatar
  • 697
71 votes
12 answers
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 ...
cory ginsberg's user avatar
63 votes
9 answers
11k 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 ...
Adam Stone's user avatar
14 votes
3 answers
3k 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 ...
daniel.sedlacek's user avatar
394 votes
20 answers
38k 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? ...
Adi's user avatar
  • 3,466
25 votes
8 answers
10k 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 > ...
dennislees's user avatar
  • 11.6k
19 votes
11 answers
9k 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 ...
Alexander Gromnitsky's user avatar
17 votes
8 answers
16k 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/...
gstern1994's user avatar
5 votes
2 answers
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.
Jonta's user avatar
  • 973
109 votes
13 answers
37k views

When a button contains text and an icon, which should come first?

Assuming I'm optimizing for making it as fast and easy as possible for most users to find the button they need, what's the optimal ordering?
Mohamad Jamal Ramadan's user avatar
106 votes
11 answers
73k 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 ...
Kevin Burke's user avatar
  • 2,367
78 votes
9 answers
27k 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 ...
JohnGB's user avatar
  • 68.4k
58 votes
6 answers
31k 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 ...
Hayden Schiff's user avatar
45 votes
10 answers
51k views

How to make selecting a timezone more user-friendly?

The list of time zones is rather long, lots of duplication, and not very friendly to programmers let alone end-users. Is there a way to shorten the list to something friendlier and sufficient for 80%+ ...
Henry's user avatar
  • 703
41 votes
8 answers
49k 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 ...
John Assymptoth's user avatar
41 votes
9 answers
6k 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 ...
Lee's user avatar
  • 563
38 votes
11 answers
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 ...
Adam Grant's user avatar
32 votes
3 answers
5k 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, ...
Zar's user avatar
  • 919
27 votes
7 answers
9k 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 ...
Giselle Sperber's user avatar
24 votes
5 answers
10k views

What are the best practices of button alignment?

There are reasons to align buttons to the left, center, or right. What are the best practices of button alignment and what factors should we consider? Which buttons should be on the left, center, and ...
Allan Caeg's user avatar
  • 3,485
15 votes
5 answers
9k 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 ...
dnbrv's user avatar
  • 13.2k
15 votes
4 answers
25k 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 ...
Michael Lai's user avatar
  • 27.3k
11 votes
5 answers
26k 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 ...
Madalina Taina's user avatar
10 votes
3 answers
5k 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 ...
Uriah Blatherwick's user avatar
9 votes
2 answers
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 (...
dbstrat's user avatar
  • 91
8 votes
4 answers
19k views

How should a multi-state toggle slider with more than two states be implemented?

The toggle slider is a very common pattern on mobile devices for iOS and certain web applications, however they work well for only a dual-state switching. When it comes to more than two states, the ...
Michael Lai's user avatar
  • 27.3k
6 votes
6 answers
11k 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 ...
surpr's user avatar
  • 415
5 votes
4 answers
2k views

Displaying Opening Hours

I'm designing a website for a client that has some irregular trading hours. Some days they remain open until 2am, others they close at 10pm. They want these hours displayed on their landing page, so ...
TheOrdinaryGeek's user avatar
5 votes
3 answers
833 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 ...
rkmax's user avatar
  • 161
2 votes
2 answers
317 views

Is there any logic when arrows are used before or when after the content

Just wondering if there is any logic defined to use a certain arrow position (left|right or front|back or before|after or whatever ...) in a navigation item or if it's merely a matter of choice and ...
Tim Vermaelen's user avatar
72 votes
13 answers
19k 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 ...
jessegavin's user avatar
  • 1,417
66 votes
14 answers
13k 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 ...
Uwe Keim's user avatar
  • 2,989
48 votes
4 answers
120k 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 ...
DI_SO's user avatar
  • 583
47 votes
6 answers
7k views

How can I highlight errors when bright red is the main color of the brand?

I'm working on a mobile website for a client whose main brand color is red. The website header and headings are all red. CTA buttons are red too. How can I effectively separate errors (mostly in form ...
bernk's user avatar
  • 1,081
45 votes
7 answers
3k 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 ...
fredley's user avatar
  • 6,204
40 votes
15 answers
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?
Jitendra Vyas's user avatar
39 votes
6 answers
7k 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 ...
efrethe's user avatar
  • 3,513
37 votes
4 answers
4k 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 ...
Taj Moore's user avatar
  • 9,307

1
2 3 4 5 6