Stack Exchange Network

Stack Exchange network consists of 175 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange

Questions tagged [layout]

The way in which the elements of an interface are laid out.

325
votes
23answers
105k 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?
242
votes
6answers
28k 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-...
211
votes
23answers
117k 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 ...
147
votes
5answers
12k 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 ...
122
votes
6answers
34k 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?
82
votes
12answers
51k 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?
70
votes
6answers
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. ...
66
votes
14answers
117k 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 ...
62
votes
8answers
9k 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?...
44
votes
13answers
4k 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 ...
43
votes
10answers
3k 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, ...
43
votes
2answers
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 ...
41
votes
4answers
6k 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 ...
39
votes
7answers
10k 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 ...
36
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 ...
35
votes
6answers
39k 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 ...
34
votes
6answers
7k 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 ...
34
votes
8answers
4k 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 ...
31
votes
11answers
6k 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 ...
31
votes
5answers
2k 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 ...
30
votes
10answers
7k 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: http://ux.stackexchange.com is an example. However some sites are left-aligned e.g. http://forums.adobe.com/index.jspa, ...
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, ...
29
votes
3answers
4k 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, ...
28
votes
12answers
18k 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 ...
28
votes
6answers
8k 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 ...
28
votes
7answers
8k 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?
27
votes
1answer
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 ...
24
votes
5answers
414 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 ...
23
votes
2answers
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 ...
21
votes
8answers
9k 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 - ...
21
votes
7answers
26k 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 ...
21
votes
5answers
5k 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. ...
20
votes
3answers
7k 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 ...
20
votes
5answers
25k 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 ¥...
19
votes
11answers
4k 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 ...
19
votes
5answers
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 ...
19
votes
4answers
6k 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 ...
19
votes
6answers
25k 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 ...
19
votes
5answers
826 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 ...
19
votes
1answer
520 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 (...
18
votes
4answers
2k 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 ...
17
votes
6answers
2k views

Ragged edges vs. alignment

In an enterprise application I have a list of items and their statuses, and we can't agree on the layout. Some people are bothered by the ragged edge that's created on the left in the first version. ...
17
votes
8answers
6k 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 ...
17
votes
12answers
2k 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 ...
17
votes
3answers
1k views

Multi shapes buttons damage User Experience / User Interface?

This is a question I have been thinking about in the past few days. I'm making a social app(Similar to Facebook or Instagram etc). As I started working on the design and I though of a question. The ...
17
votes
4answers
13k 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 ...
17
votes
1answer
2k views

How should horizontal dashboard numbers react on a responsive page?

I have a set of dashboard values on a sticky horizontal panel on the top of the UI. These numbers are sales values so they are pretty important to the user. The layout looks something like this: But,...
17
votes
9answers
4k 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 a certain screen size (typically 1024x768) that I find that size to not be a problem. ...
17
votes
5answers
1k views

How is a cluttered layout quantified?

In the comments of a different question, I asserted that Visual Studio has a "cluttered" layout. A different user disagreed with my assertion, and it made me curious as to how to quantify a cluttered ...
16
votes
4answers
14k 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 ...