Questions tagged [layout]
The way in which the elements of an interface are laid out.
907 questions
418
votes
24
answers
196k
views
OK/Cancel on left/right?
Should OK button be on left of Cancel button or vice versa?
Are there any studies suggesting either of the solutions?
- 4,583
250
votes
6
answers
32k
views
Is there a name for this drop-down anti-pattern?
Recently I have seen a small UI issue in mouse-over drop-downs. Here is an example of such a drop-down (although Bloomberg is not the only offender):
https://www.bloomberg.com/view/articles/2017-08-...
- 1,873
234
votes
23
answers
153k
views
How To Display Too Much Data
We're building a web-based platform where the main dashboard shows a table of data for users to view and analyze. As we're growing this tool, we seem to be adding more and more columns and are running ...
- 2,765
157
votes
5
answers
16k
views
Avoiding the Hermann grid illusion
I'm a UX newbie and I'm trying to design a page of image thumbnails. I came up with this:
The trouble is that this layout creates the Hermann Grid illusion. When looking at the grid, most people see ...
- 1,523
140
votes
7
answers
58k
views
Why do numpads on keyboards and phones have reversed layouts?
I came across this on the web. It's supposed to be funny, but we all know better :)
So, why are the numpad layouts different, and what are the reasons behind each?
- 31.5k
92
votes
12
answers
77k
views
Should checkbox labels be to the right or the left?
I've got some checkboxes with text values of varying lengths (from say 5 characters up to about 60) - which is the preferred layout? Value to the left and checkbox to the right, or vice versa?
Becskr
71
votes
6
answers
10k
views
Confusing checkboxes and radio buttons
I have a problem building a certain UI for a website. I'm going to demonstrate the problem with a simple website for a restaurant chain:
Context
the website has many users and many restaurants. ...
- 823
68
votes
8
answers
14k
views
Most User Friendly Color Picker
I'm designing a website, and I need to allow the user to change the color of some elements. I will have to implement a color picker. What kind of color picker is the most user friendly, and looks best?...
- 901
68
votes
14
answers
130k
views
Common screen resolution?
I'm developing a web application which is quite information heavy. This means that every pixel available in the screen for display helps a lot, to avoid the UI looking too cluttered and to display ...
- 799
48
votes
13
answers
5k
views
Can ugly be good UX?
It's heresy I know, but look at DrudgeReport.com. It's raw, hand written HTML, it's plain, boring typography, it's something any UX or Graphic designer would scoff at if you handed it across their ...
- 41k
45
votes
10
answers
4k
views
Which direction indicates newer/older?
So I'm reading some blogs and I get to the bottom of the page when I see a graphic similar to this:
<< Newer Posts Older Posts >>
This makes sense to me. But then, quite often, ...
- 2,642
45
votes
2
answers
3k
views
Why don't ATMs show blank arrows for unused buttons? [closed]
Have you ever had trouble lining the arrows up with the correct button on ATM consoles and other similar interfaces? Height of user can affect perceived alignment, as well as poor installation or ...
- 389
43
votes
4
answers
10k
views
Button changing its text & action. Good or terrible?
After the user Registers for an event (he goes to cart and pays, etc.) the next time he visits the page, the event for which he registered now shows a less emphasized Unregister button, which does the ...
- 559
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 ...
- 1,631
39
votes
7
answers
12k
views
In burger menus, should "Logout" always be at the bottom and why?
I noticed this while using websites that require login/logout - I get used to accessing the "Logout" button at the bottom of the menu. For example:
On burger menu, the logout option will always be at ...
- 491
38
votes
7
answers
49k
views
Best Design/Order/Layout For Mailing Address Form
Is there any standards out there when it comes to a mailing address form?
I need to collect the following fields:
address line 1
address line 2
city
postal code (or zip)
province(or state)
country
...
- 737
37
votes
12
answers
28k
views
Are two toggle buttons better than a tri-state switch?
I have a grid of people where for each person the user needs to decide whether to include the person in a predefined group, exclude them from the group, or leave it undecided. The initial state is ...
- 31.5k
36
votes
11
answers
13k
views
Is there a usability reason for centering a website's content area on a page?
A lot of websites these days have content area's which are center-aligned: User Experience Stack Exchange is an example.
However some sites are left-aligned, e.g. Adobe Support Community, Area 17, ...
- 2,166
35
votes
8
answers
5k
views
Is it a good idea to have a large footer containing many links?
In recent years, it's become quite a common design pattern to have a large footer on every page, containing a 'mini sitemap'.
For example:
This has supposed SEO benefits but would also seem to be ...
- 1,677
33
votes
6
answers
8k
views
About fullscreen scrolling webpages
There are recently many websites using full screen scrolling pages since Apple launched their own with the iPhone 5C. (website not available anymore, but a reproduction can be found here)
Some other ...
- 1,077
33
votes
11
answers
10k
views
For websites, is it better to have a variable width layout or a fixed width layout?
Due to different screen resolutions, the user experience browsing a website might be different. Is it better to layout the website with a fixed width? (and if so should there be different static ...
- 1,245
33
votes
5
answers
3k
views
When displaying statistics to a user, is it better to bold the data or the label?
The following picture shows some statistics. Here they bold the data, not the label.
Which is better? Does it depend on the information being shown?
What if you have a header on a report with some ...
- 3,264
32
votes
6
answers
14k
views
Usability of vertical text
I am playing with ideas for a menu that I want to add to some site designs and was wondering: How usable is vertical text in any portion of a site (specifically menus)?
For example
You can have ...
- 488
32
votes
3
answers
6k
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
30
votes
7
answers
11k
views
Greyed-Out vs Invisible
What is a good criterion or rule-of-thumb for determining when a control should be greyed-out and when should it be completely invisible?
- 457
29
votes
3
answers
6k
views
Odd or even number of products per row on a product listing page?
I heard from a reputable source that on e-commerce websites, users find it easier to choose a product when there is an odd number of items in row, as compared to an even number.
In their experience, ...
- 71.3k
27
votes
1
answer
7k
views
How to handle pre-4.0 versions of Android when designing a layout?
I'm designing the UI for an Android app taking the Google User Interface guidelines into account for my Android 4.0 phone.
The current concept looks like this:
How would I go about supporting this ...
- 417
27
votes
7
answers
67k
views
What are the rules of thumb for margins in web design?
My web designer tells me that in a web page, the empty margins or padding should always be multiples of a standard. For example 6 px, 12px, 18px. This should produce nicely balanced lay-outs. I would ...
- 271
25
votes
3
answers
22k
views
How to deal when two or more markers in a map are super close?
I would appreciate if you can help me to find an elegant solution to the issue of having lots of markers in nearly the same position of a map.
Clustering is not a good solution in this case given the ...
24
votes
8
answers
11k
views
Should we provide "back" button for mobile website?
In mobile website for all smartphones (iPhone, Android, Blackberry, Windows phone 7), should I provide a "Back" button inside the webpage even when the browser has functionality to go to back?
Edit - ...
- 4,902
24
votes
5
answers
440
views
Should voting buttons on SE float down when scrolling?
SE is A/B testing a new solution where the voting buttons on an answer remain visible as you scroll down.
(I apologize for the running gif, it's super annoying, but it does the job).
Apparently the ...
- 31.5k
23
votes
2
answers
3k
views
Better way to show books in a row
I need to set area on site with most downloaded books and I'm facing the following problem:
Book covers can have different width and height ratio, meaning not all books have proportional edges.
There ...
- 333
23
votes
7
answers
40k
views
Best layout for a settings page
I have a settings page with a fair number of options. See screenshot
Each of the links will take the user directly to a form where they can change the details (ie Business Settings) or a search/list ...
- 605
23
votes
5
answers
8k
views
Which is more likely to be read and processed: (related) text placed above or below an image/video?
I'm thinking about layout on pages where the main asset is visual — for instance, a photo of an item from the collection on a museum website, or embedded video as on YouTube and many news sites. ...
- 1,813
22
votes
5
answers
35k
views
Where to place currency symbol when localizing and what to do with odd symbols
Is there a suggested, single location to place the currency symbol every time for any given locale?
For example, always on the left with a space before the amount like this:
R 10.00
$ 10.00
€ 10.00
¥...
- 684
22
votes
7
answers
21k
views
Fixed width for buttons or proportional with the text?
What is the best practice for a UI, to make all the similar buttons with a fixed-width, no matter how long is the text (with the condition to fit) or make the width proportional with the text and add ...
- 4,521
21
votes
4
answers
11k
views
Should the search box be on the left or the right side
In a web app with a search box in the header - where should the search go, on the left or the right side of the header? What considerations should be taken into account when making this decision?
In ...
- 31.5k
21
votes
5
answers
5k
views
Emphasize Label or Value?
I've often wondered what is the recommended item to emphasize -- the item label or the item value -- when you want to draw a user's attention to a specific piece of information. For example, our ...
- 844
20
votes
4
answers
18k
views
How to organize a form with many fields?
Where I work, we have a system that has a screen with several fields. There are approximately 50 fields and all are important and should appear.
//edited in gimp :D
Any suggestions on how to arrange ...
- 530
20
votes
2
answers
40k
views
Why does the Xbox controller have non-symmetrical analog sticks?
The image below shows the controllers of the three eighth-generation consoles (Xbox One, PS4, Wii U).
As you can see, both the PS4 and Wii U controllers have symmetrical analog sticks, which seems ...
- 467
19
votes
11
answers
5k
views
Is it ok to use arrows to indicate money movement in & out of an account?
I have seen numerous examples of banking applications that use arrows to indicate money in and out of an account. However the direction of the arrow is a bit problematic, specifically in which ...
- 7,026
19
votes
4
answers
3k
views
Should radio options be displayed vertically or horizontally?
For Example:
Results must match () All () Any () None Of the search criteria
vs
Results must match () All of the search criteria
() Any
() None
The ...
- 737
19
votes
9
answers
6k
views
How do you conquer the challenge of designing for large screen real-estate?
This question is a bit more subjective, but I'm hoping to get some new perspective. I'm so used to designing for certain screen size (typically 1024x768) that I find that size to not be a problem. ...
- 1,150
19
votes
5
answers
1k
views
Which placement of list of ingredients is most convenient for the cook?
In the process of doing the layout for a cookbook, I'm faced with the problem of placing the list of ingredients for each recipe. I've looked at several cookbooks and seen numerous approaches. I can ...
- 293
19
votes
1
answer
571
views
As screens become wider, should navigations and toolbars go away from the top, to the sides?
The counter-example to my question are the ribbons that MS introduced with Office 2007; they take up a lot of screen estate at the top of the user-interface. Since the screens become wider and wider (...
- 979
18
votes
8
answers
7k
views
What is the best way to show my users that buttons in the same line have different functionality?
I have four buttons on my interface that all look the same but don't all act the same. They are laid out like the example below.
download bmml source – Wireframes created with Balsamiq Mockups
...
- 3,062
18
votes
13
answers
4k
views
Separation of play and pause buttons for playing media
I seem to remember reading somewhere that having the play pause actions triggered from a single button that toggles is a bad idea
It seems to me that this idiom works well (e.g. pressing space to ...
- 283
18
votes
5
answers
3k
views
On a web page, what is the user's first point of focus?
Background
I am designing a website for my software development business and I am struggling a bit with the layout.
I offer three main services/products:
Software Development
Process Improvement ...
- 487
18
votes
10
answers
33k
views
Should headings always use the same font as the body?
I'm working on some of the layouts for a User Handbook and right now my main concern is fonts. I'm trying to decide whether to use the same font for the body text and the headings.
If I use different ...
- 284
18
votes
4
answers
17k
views
Is a website with a Fixed Header good for end-users of a Web2.0 website?
Fixed Header is the header that is always visible to users even the user scrolls down. It uses the fixed-position in CSS.
There a lot of websites nowadays that use a fixed header, such as gmail or ...
- 311