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.
263
questions
513
votes
24
answers
107k
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 ...
- 7,106
305
votes
16
answers
53k
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 ...
- 3,291
89
votes
9
answers
101k
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.
- 1,094
67
votes
5
answers
54k
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 ...
- 26.7k
133
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,...
- 8,281
87
votes
3
answers
51k
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 ...
- 1,124
56
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?
- 932
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 ...
- 796
55
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)...
- 823
47
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 ...
44
votes
8
answers
39k
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 ...
- 563
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 ...
- 26.7k
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 ...
- 697
70
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 ...
- 891
62
votes
9
answers
10k
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 ...
- 721
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 ...
- 4,269
393
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? ...
- 3,456
23
votes
8
answers
9k
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 > ...
- 11.6k
20
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 ...
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/...
- 313
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.
- 963
3
votes
3
answers
5k
views
What are best practices for blocking UI when application is busy
I'm writing a web app using Twitter Bootstrap with PHP on server side.
My app makes regular ajax requests via jQuery and i want to disable certain parts of the UI until the server completes processing ...
106
votes
13
answers
34k
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?
- 1,188
105
votes
11
answers
70k
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 ...
- 2,317
77
votes
9
answers
26k
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 ...
- 68.3k
57
votes
6
answers
30k
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 ...
- 673
42
votes
10
answers
50k
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%+ ...
- 673
40
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 ...
- 553
40
votes
8
answers
48k
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 ...
- 1,611
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 ...
- 902
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, ...
- 919
24
votes
5
answers
9k
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 ...
- 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 ...
- 13.2k
14
votes
4
answers
24k
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 ...
- 26.7k
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 ...
- 4,481
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 ...
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 (...
- 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 ...
- 26.7k
6
votes
6
answers
10k
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 ...
- 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 ...
- 171
5
votes
3
answers
829
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 ...
- 161
71
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 ...
- 1,407
65
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 ...
- 2,959
47
votes
4
answers
119k
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 ...
- 573
46
votes
6
answers
6k
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 ...
- 1,071
44
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 ...
- 6,174
39
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?
- 4,872
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 ...
- 3,453
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 ...
- 9,297
33
votes
6
answers
8k
views
Multiple breadcrumbs
Breadcrumbs allow users to keep track of locations within websites. They show the path used to achieve the resource. But if the resource could have different categories, has the sense to create ...
- 1,574