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

learn more… | top users | synonyms

12
votes
3answers
544 views

Defaulting to show all until user searches?

I am designing an admin page that will be used to manage account information for hundreds to thousands of medical offices (practices). Users will be able to take a few actions on a practice or take ...
12
votes
5answers
915 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 ...
12
votes
2answers
732 views

Where to put the “new button” in a metro style app

I am creating a Windows 8 style app, and I am confused where to put the new button. I have many options I can choose from. First above the search list: Second under the search list: Third with ...
11
votes
5answers
371 views

Button placement while others ones are invisible/disabled

I have a tool bar of buttons. The state changes every time user interact with it (fig. 1). Fig. 1 Sometimes application allows user to refresh view only, so other buttons are invisible (fig. 2). ...
11
votes
4answers
5k 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 ...
11
votes
4answers
441 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 ...
11
votes
5answers
4k 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 ...
11
votes
5answers
2k views

Bylines at the top or bottom of an article? Or both?

Jakob Nielsen's latest Alertbox post recommends omitting bylines except in a few cases regarding credibility. We've considered dropping bylines from the top of news articles to the bottom of articles ...
11
votes
4answers
729 views

Mixing Full Page-Width Navbar With A 960px Body

Is there ever a use case for mixing a full-width top navigation bar (meaning the navigation bar content is also full-width) with a contained body (around 960px)? What are the benefits or drawbacks to ...
10
votes
10answers
5k views

Should headings always use the same font as the body?

I'm working on some of the layout 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 ...
10
votes
4answers
618 views

In a full screen mobile game where all corners are taken, where should I put a menu button?

In a full screen mobile game, where all four corners have already been taken to display status and information, where should I put a menu button? I was relying on the hardware button of Android ...
10
votes
5answers
886 views

Why do squares look taller than wide on screens?

Take a look at this square: To me it seems that the square is taller than that it's wide. Yet both axes measure 400 pixels. What is causing this optical illusion? UPDATE 10 March 2014: A lot of ...
10
votes
2answers
712 views

Caption below or above image for navigation purposes?

It was already discussed here that for layout purposes, where images and video appear on a web page, ordinary captions are probably best placed below the graphic — largely due to convention. I want ...
10
votes
4answers
1k 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 ...
10
votes
1answer
449 views

Why are nested column layouts getting so popular?

Google+, Ebay, Tumblr are just a few of many who have changed their layout to nested multiple columns instead of a uniform grid view. Personally I find it unorganized and hard to find what I´m looking ...
10
votes
11answers
589 views

Giving users ability to change order of information on their profiles

I'd like to allow people to change the order of sections on their profiles. The idea is that if a person X has an impressive "Experience" section, while person Y has no experience but an interesting ...
10
votes
2answers
2k 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 ...
10
votes
4answers
1k views

How do I represent null values in a line chart?

I am building a web-based analytics platform. I am looking to plot a line chart that represents the number of seconds it took for me to reach a live service agent via phone on a given day. In the ...
9
votes
5answers
2k views

Upvote / Downvote Button order

I'm currently designing a website for my school, where you can rate images. Under each image, there is a comment button, a share button and the two up- / downvote button. Now I need to place these ...
9
votes
7answers
11k views

Security question & answer. What questions do you ask?

Working on a save quote feature for our new website, one of the security requirements is to ask a secret question and obtain a value from the user. Does anyone have suggestions on the type of ...
9
votes
6answers
314 views

How to layout an icon, text and number within limited space?

If I have limited space, typically narrow enough that I cannot just spell things normally like "4 Strength" or "Strength 4", as this shrinks the font to nearly unreadable. How can I layout an icon, ...
9
votes
6answers
462 views

Which is more important, less mouse distance to travel or visual consistency?

I have an interface that I am currently working on that asks the user to make a choice of a single item. These items are divided into 3 separate categories and the client has insisted that each ...
9
votes
10answers
1k views

How can I deal with too much blank space in a desktop application?

Usually people are concerned with too much data/interface, and not enough screen real estate, but I'm in the opposite situation. The desktop application I'm working on has several tabs for entering ...
9
votes
5answers
360 views

What is the value of interface layout and its impact on the overall user experience?

I often have difficulty convincing people that the layout/design/visual-styling of an interface has impact on how the user feels about the product as whole. All to often the argument is that the user ...
9
votes
3answers
908 views

Why use 'fixed width' or boxed layout rather than fluid?

I've noticed many sites (including stackexchange) use the 'fixed width' or 'boxed' layout where 50% of my screen is white space, kind of like watching a standard definition TV show on an HD screen. ...
8
votes
9answers
723 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 ...
8
votes
6answers
7k views

What would be the best layout width when traffic monitor sizes are mostly 1280 x 1024?

I am arguing with my client, that 960 pixels layout width will be okay for the site. He keeps suggestion that the layout width should be larger. He gave me these Statistics In % descending order: ...
8
votes
9answers
695 views

How can I make the relationship between rows in two tables more obvious to the user?

I have a web page that at first showed a top level goal with a bunch of risks. here is an example mockup: I now realized that since I have a series of events, it would be good to break down and ...
8
votes
3answers
8k views

What is a good web page resolution to design for? [duplicate]

Possible Duplicate: Common screen resolution in 2011? What would be a good web page resolution to design for? I currently work according to 1024px wide resolution screens. and create UIs ...
8
votes
6answers
498 views

Making contact detail form more friendly

I have a windows based form in my project for adding contact details. Here's a screenshot I have added textbox for First name, Last name , var and cst (vat and cst are numbers related to ...
8
votes
6answers
647 views

Adding a tagline to a logo

I'm working on a website redesign. I have suggested that we should add a tagline to the logo to make clear what this page is all about. The client argument is that most people already know what this ...
8
votes
4answers
358 views

Is there a preferred manner of laying out a few radio buttons?

If I have a requirement to display three radio buttons, is there some UX standard that says they should be laid out vertically and not horizontally? i.e. is: o High Temperature: o ...
8
votes
3answers
8k 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 ...
8
votes
3answers
2k views

How to best display a long list of check boxes

In my application users are required to select from a drop down, a list of projects they wish to include in their custom search. The easy part is that users can select one project to filter on or ...
8
votes
3answers
536 views

Default input labels and text sizes

Looking to get community feedback on a few small related form questions: For standard forms: How long should a standard text box input be? These text boxes would be for first and last name? Should ...
8
votes
2answers
242 views

How and when to go about challenging a tried and true user behavior?

There are many user behaviors that have been ingrained in us over time. Some of them good, and some of them just because, "that's the way that it has been done for years, people expect it." The ...
8
votes
4answers
461 views

Multiple email address field in a simple form

This is a survey site, and after completing the survey the user has the option to send a copy of the report to themselves. There is a small container on the page, with a text field and a submit ...
8
votes
1answer
470 views

How does the orientation of a pricing table affect conversion rates?

Do people buy more when products are presented horizontally across the page or when they are presented vertically on the left? My company is in the first stages of redesigning one of our e-commerce ...
8
votes
1answer
1k views

Reporting web app - how to design large data tables?

I'm working on a legacy webapp that's mainly focused on reporting large amounts of data - ie tables with 20+ columns reporting financial data. The main problem is table layout inconsistency depending ...
7
votes
3answers
445 views

select from predefined list if exist ,else insert a new item to the list?

What's the best experience to do the following: The user will insert a new subject(text) only if it isn't in the existing list. So, it will be added to the existing list for all users. I have ...
7
votes
5answers
2k views

Two-level menus: Why? and When?

Two level menus: should they be used? Why are they important? I never found any resource explaining this. Should I avoid them and only use them when you really have too much stuff to present?
7
votes
4answers
793 views

Why use a 3-column layout like StackExchange, Facebook and YouTube?

Why do sites like StackExchange, Facebook and YouTube center their content and reduce its width? As opposed to sites like Reddit that go full width. Are they trying to spare the user from too much ...
7
votes
5answers
2k 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 ...
7
votes
2answers
2k views

Good ways to make a dynamic GUI?

I have an application I am designing and it's in a pretty functional state at the moment. But the database I am using has 1000's of items and is constantly changing and growing. The application of ...
7
votes
3answers
368 views

How to organize multiple information popup areas over a table?

How might you best organize multiple popups over a table when both the table content and the popup content are equally important. Scenario: Tabulated data, for which the user may be interested in ...
7
votes
3answers
954 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 ...
7
votes
4answers
676 views

How many elements are too many for one screen of a mobile (iOS/Android) application?

Without scrolling, what would be the maximum amount of centered buttons I could arrange on a vertical axis before it became too cluttered? Interface Builder gives suggested distances between ...
7
votes
5answers
246 views

How to lay out a screen with dozens of fields and have help for each

We have a screen that has a form that gathers a lot of input. Many of the terms and questions are confusing so we have help for them. We are trying to put a little (?) help icon for each line. We ...
7
votes
3answers
596 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 ...
7
votes
1answer
206 views

At what point do you let users opt in to a redesign?

I'm doing a "refresh".. mainly we are going responsive so that users over 1366px width will see a large layout with bigger media objects, users below 1366px will see the same layout with a slightly ...