Questions tagged [layout]
The way in which the elements of an interface are laid out.
85
questions
407
votes
24
answers
184k
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,473
230
votes
23
answers
147k
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,725
68
votes
14
answers
128k
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
34
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, ...
- 2,136
23
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,872
47
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 ...
- 40.8k
11
votes
3
answers
6k
views
How to design usable web site terms & conditions?
What are some guidelines and examples for designing usable legal terms for web sites? I know that most users don't read it, but are there innovative ways to improve readability and presentation of ...
- 257
135
votes
6
answers
53k
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.1k
31
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?
- 467
22
votes
5
answers
7k
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,793
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 ...
- 1,245
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 ...
- 31.1k
18
votes
12
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 ...
- 283
2
votes
3
answers
5k
views
Best way to display more table columns and rows than I have room for?
I have a similar problem to what is mentioned in Best way to display more table columns than I have room for?. But to make things a little more difficult, the table has approximately 1000 rows and 64 ...
- 21
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
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 ...
- 1,667
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
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 ...
- 3,204
19
votes
9
answers
5k
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
16
votes
5
answers
9k
views
Too many tabs - use buttons instead?
We have an admin page in our application that has toomanytab-itus (see the second set of tabs are stacking):
I've been tasked with solving this issue. Reorganising/grouping the content to reduce the ...
- 706
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
5
answers
8k
views
In a grid, how to display long column headers
When displaying data in a grid (each row contains a record, each column a different record field), vertical space need is easily solved with scrolling or paging.
We are usually sooner missing ...
- 2,028
11
votes
4
answers
633
views
What research, patterns or techniques will help me choose the correct colors (or saturations) to the various UI elements of a page?
I am building a tool that will be used by call center agents. It is to help them support products on behalf of the customers who call up. It acts as a portal to many different types of product ...
- 1,798
7
votes
3
answers
3k
views
Optimal placement of share on Twitter/Facebook/social media widget on web page to encourage use
Like most every site out there, I develop a site where we encourage people to share the content through Twitter and Facebook.
Also, like most other sites, the placement of the widgets is in a fixed ...
- 213
4
votes
4
answers
3k
views
Why choose dark navbars?
Been reading about Google's new dark navbar over at ReadWrite. It's funny that ReadWrite, as well as StackExchange, has chosen a dark navbar as well.
Why this trend to choose dark navbars?
- 1,886
89
votes
12
answers
74k
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
43
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,622
36
votes
12
answers
26k
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.1k
33
votes
6
answers
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 ...
- 1,077
32
votes
6
answers
12k
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
23
votes
6
answers
38k
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
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
¥...
- 684
20
votes
4
answers
16k
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
10
votes
9
answers
4k
views
How should text wrap in a code block?
I am working on an application where code will be shown on a mobile device. This gives us a constrained width as horizontal scrolling isn't a desired choice for code with long lines. So we have to ...
- 68.3k
10
votes
3
answers
3k
views
Layout for adding one or more contacts to a record
The context:
The user is creating a client record. Against each record their could be one or more contacts (people) provided. Often this will be adding 1 or 2 but could sometimes be up to 5-10.
The ...
- 4,310
9
votes
2
answers
22k
views
Best way to display more table columns than I have room for? [duplicate]
The web development office I work for is working on a fixed-width web site. On one page, we have a table inside of the fixed 960px space available. So far, this table has worked out great for us, but ...
- 271
8
votes
3
answers
2k
views
Graphically displaying a conversation between more than two people
I'm working on a project that involves displaying a text-only conversation between anywhere from two to ten or more people. The reader will be either zero or one of the participants.
The main UI will ...
8
votes
3
answers
818
views
What are some advantages of left-aligning columns within the browser window?
Youtube and Google Plus have changed their layouts such that in a very wide browser window, the content columns are left-aliged, leaving a large white space on the right side. This is a change from ...
- 193
6
votes
5
answers
886
views
How to avoid big banks of buttons?
What are some alternatives to having repetitive rows buttons that create large banks like the one shown below.
I think it's too visually dominant and distracting, not least because there's one of ...
- 11.6k
6
votes
4
answers
3k
views
Should I use a radial menu design for a touchscreen game?
We are working on a game for android. We had a normal menu where each menu entry is below the other. As we find this boring, we looked to different approaches and came across the lock screen on ...
- 163
6
votes
6
answers
12k
views
Best placement for a "Go Back" button: top or bottom?
I know that it is bad practice to use a "Go Back" button (since the browser has such a function) but when it can't be avoided for some reason, is it better to put it on top (similar to how the back ...
- 4,248
4
votes
1
answer
1k
views
Applying the Windows UX Design Guidelines for Layout and UI Design consistently
There are many potential threads to this question I want to ask, but I will just limit it to two aspects from this example:
Firstly, in the Insert Picture Dialog there are five different types of ...
- 26.7k
1
vote
2
answers
1k
views
What is a good reason to tell clients who want their logo to be always included in every screen that it shouldn't be done for a mobile app?
Just as the title says, I'm not a fan of always displaying the logo at the title bar of a specific app. I sometimes come across a client whose concept screens are like that. What would be a good ...
- 349
248
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,853
154
votes
5
answers
15k
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,493
38
votes
7
answers
47k
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
...
- 727
29
votes
3
answers
5k
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, ...
- 71k
19
votes
1
answer
567
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
19
votes
5
answers
988
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
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 ...
- 727