Skip to main content

Questions tagged [layout]

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

Filter by
Sorted by
Tagged with
410 votes
24 answers
191k 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?
Art's user avatar
  • 4,503
249 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-...
N. Quest's user avatar
  • 1,863
233 votes
23 answers
151k 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 ...
Jason's user avatar
  • 2,755
156 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 ...
dB''s user avatar
  • 1,513
136 votes
7 answers
56k 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?
Vitaly Mijiritsky's user avatar
90 votes
12 answers
76k 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?
user avatar
70 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. ...
HL.'s user avatar
  • 813
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?...
Steve's user avatar
  • 901
68 votes
14 answers
129k 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 ...
Pere Villega's user avatar
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 ...
Zelda's user avatar
  • 40.9k
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 ...
juanitogan's user avatar
44 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, ...
Nic's user avatar
  • 2,632
42 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 ...
Dennis Novac's user avatar
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
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 ...
corgiiscute's user avatar
38 votes
7 answers
48k 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 ...
Patricia's user avatar
  • 727
36 votes
12 answers
27k 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 ...
Vitaly Mijiritsky's user avatar
35 votes
11 answers
12k 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, ...
ArchieVersace's user avatar
35 votes
8 answers
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 ...
Bobby Jack's user avatar
  • 1,667
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 ...
Steve's user avatar
  • 1,077
33 votes
11 answers
9k 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 ...
txwikinger's user avatar
  • 1,245
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 ...
The Sheek Geek's user avatar
32 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 ...
richard's user avatar
  • 3,224
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
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?
Joel B's user avatar
  • 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, ...
Roger Attrill's user avatar
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 ...
Overv's user avatar
  • 417
26 votes
7 answers
64k 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 ...
Tintels's user avatar
  • 261
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 ...
Raul Leaño Martinet's user avatar
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 - ...
Jitendra Vyas's user avatar
24 votes
5 answers
439 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 ...
Vitaly Mijiritsky's user avatar
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 ...
RhymeGuy's user avatar
  • 333
23 votes
7 answers
39k 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 ...
Craig's user avatar
  • 605
22 votes
5 answers
34k 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 ¥...
darryn.ten's user avatar
22 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. ...
finiteattention's user avatar
21 votes
4 answers
10k 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 ...
Vitaly Mijiritsky's user avatar
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 ...
Bill Dagg's user avatar
  • 844
21 votes
7 answers
20k 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 ...
Madalina Taina's user avatar
20 votes
4 answers
17k 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 ...
Xosler's user avatar
  • 530
20 votes
2 answers
39k 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 ...
FThompson's user avatar
  • 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 ...
Okavango's user avatar
  • 7,016
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. ...
Berin Loritsch's user avatar
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 ...
Henrik Hansen's user avatar
19 votes
1 answer
570 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 (...
ammoQ's user avatar
  • 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 ...
BDD's user avatar
  • 3,052
18 votes
13 answers
3k 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 ...
Willbill's user avatar
  • 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 ...
Matt Cashatt's user avatar
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 ...
waiwai933's user avatar
  • 284
18 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 ...
Patricia's user avatar
  • 727
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 ...
Akaren's user avatar
  • 311

1
2 3 4 5
19