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

learn more… | top users | synonyms

5
votes
3answers
106 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. ...
1
vote
1answer
95 views

How can I show a clear hierarchy in a small space?

I'm making a thing that looks like this: It's a list of pages which have tags. These tags can have a hierarchy, like this: programming | \-> perl | \-> python | | | \-> python 2 | | ...
1
vote
1answer
111 views

Usability of having content in tabs versus being stacked

I am currently working on a project where we are discussing internally about the benefits between putting content inside of tabs versus stacking that content with anchor links above it. It is a ...
1
vote
1answer
42 views

Layout changing without user control

I am having this idea pushed at work where the layout of information should change dependent on the amount of different items we have to display. Let me be specific: If up to 12 we should show the ...
0
votes
1answer
37 views

What are Layout Filters? [closed]

Website: http://thegrid.io talks about something called "Layout Filters" which are more powerful than "templates" So what are they? I tried googling but nothing came up. And how are they more ...
1
vote
1answer
75 views

Display two column table on smartphone

I've been somewhat struggling on how to display a two column table on a smartphone (iOS app specifically). My said that they would like something other than a boring UITableView to display the data. ...
1
vote
2answers
56 views

How can I most effectively communicate design specs to my developer? [duplicate]

I am currently designing a complex app for a large energy corporation and I need to provide diagrams explaining the dimensions of my UI elements, layout constraints, typefaces, colours etc to my ...
0
votes
0answers
12 views

List of sub-items on tablets

At the moment I got this setup: download bmml source – Wireframes created with Balsamiq Mockups Is there a better way to handle this?
0
votes
1answer
59 views

Should I put a button below a growing list?

I'm trying to decide on a button location for an app I'm building. The app basically generates teams using lists of players for a given position. It feels most natural to me to have the button to ...
0
votes
0answers
52 views

Where to put the global and local navigation?

I'm not really sure where to put the local navigation. The YELLOW box is a list of devices that the user can connect to, and could have anything from 1 to 1000+ items in it. The RED box is ad/info ...
-1
votes
1answer
39 views

User interface of a simple single image detail view

I know this sounds generic, but I'm trying to find some clues and examples. What would be the best way to present a single image (about 1/4 of desktop screen size), along with some info (name and ...
0
votes
1answer
75 views

Mobile grid views - which style is preferred by users - rounded corners with borders or rectangles?

Is there's a way in which users of mobile devices prefer to perceive grid view content? I'm a mobile developer and stare at mobile interfaces quite a lot. One of the things that was bothering me for ...
0
votes
0answers
25 views

What is the name for this UI layout? [duplicate]

I'm looking for the name of the UI layout found on sites like Airbnb, Square, Paypal and others where pretty much the whole site is on one page and the user scrolls down to see all the content, with ...
1
vote
2answers
85 views

Do users find it hard to differentiate latest information from historic information when both are displayed at the same time?

I have two panels - one contains current information for a subject, the other contains historic trend information for the subject in a graph. I can display them on the same page - one underneath the ...
2
votes
2answers
36 views

Best way to show an applied variable across multiple plan information containers

I am trying to represent a variable that is set by a user that effects the cost of an item. The same variable would show on each applicable item block. Block may or may not be stacked as in the image ...
0
votes
0answers
20 views

Would laying out a multitude of [text-only] topics/options (> 15) in a card layout increase interface clutter?

I am trying to figure out when a card layout is optimal and when alternatives are ideal. For example, Khan Academy's lists has > 50 items, and is arranged in a neat list. Observing the flat trends ...
0
votes
5answers
135 views

Displaying a hierarchy in a dropdown

I have a dropdown in my application that allows users to select a location in a hierarchy. Currently, I am showing each level in the hierarchy as a tree-type layout, with the lower items intended and ...
0
votes
0answers
53 views

Layout filterable grid and categories

Background A user goes to this page to view the levels their groups (>=1) have been placed in for certain categories, i.e., basketball, etc. Each category has an overview pdf document assigned to ...
29
votes
6answers
3k 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 ...
0
votes
0answers
13 views

Making 4-column table responsive [duplicate]

I have a 4 column table for displaying event information about our event. I am facing issues with narrow screens when I have 4 columns of data in the view. What would be the most feasible solution ...
2
votes
5answers
432 views

Designing gantt like schedule in grayscale

I had some problem deciding if this should go here or in Graphic Design site. I hope I got it right! So I'm redesigning a schedule application. It looks something like this: Each activity has a ...
0
votes
1answer
34 views

Surveillance System Builder Utility

I'm trying to redesign a utility that allows the user to estimate what kind of DVR they need based on the type/amount of camera(s) they need. It filters out Video Recorders models based on the ...
0
votes
1answer
62 views

Truncated string usability

I am faced with a tricky situation in a data-driven application. I have really long names and a short field for them only available. My idea was to use css-ellipsis to cut the length to appropriate ...
1
vote
5answers
111 views

What is the best way to arrange chinese words on a menu [closed]

On a English menu , the food items can be arranged according to alphabetical order For a Chinese menu , there are no alphabet, only chinese characters , what would be alternative way best to ...
0
votes
0answers
44 views

Alternatives to dragging items to add to data view

I have a design in which a list of items are in a tree in a column on the left of the page. Each of these items can be added to one or more views on the right side of the page. Currently, this is done ...
40
votes
2answers
2k 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 ...
2
votes
1answer
693 views

Is “above the fold” still relevant in 2014?

I'm currently researching about the validity of the "above the fold" concept in 2014. So far the generally agreed-upon facts I've detected about the "above the fold" are: Scrolling is now natural ...
0
votes
0answers
51 views

How to tell a user that part of an import was unsuccessful [duplicate]

At the company I work for each week the back office needs to import a CSV file that contains about 50 rows of customer information (new customer, customer details, addresses and others). Sometimes ...
7
votes
9answers
659 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 ...
2
votes
3answers
72 views

Grouping Similar Controls

For Windows based software regarding image processing, I am torn between two options for grouping logically similar parameter controls. The option on the left is more thrifty with screen space, ...
3
votes
1answer
42 views

Which would be more appropriate: redirecting users on a subdomain to go to my shop or stay in the same domain

I am currently designing my portfolio and I wanna integrate my shop into it but I'm quite not sure if it would work with my idea. My idea is to build my portfolio and have a button where it says ...
1
vote
4answers
219 views

Multiple search fields on directory website homepage

I am developing a web directory app whereby users main action will be to search for business addresses right from the home page. Currently, I have a search box centered on the homepage. Like this: ...
0
votes
2answers
71 views

UI Design of News Magazine with borders, boxes or no seperation [closed]

Im building a news website and want to know which UI Design is the best in terms of readability, findabiltiy and focusing of each / important sections? Example 1 - Boxed Layout - each section has its ...
0
votes
1answer
122 views

Mixing AND and OR filters — how to make it more clear and less confusing? [duplicate]

I am working on the Hotel Search App (33hotels.com), where I let the user filter Hotels by facilities. Most filters are "AND-filters" but some have to be "OR". For instance, someone may want "wifi" ...
0
votes
2answers
81 views

Applying features and add-ons for multiple lines

I want the user to have the ability to add features and add-ons for each line on the website (order page). If you look at the UI wireframe, it will ask you how many lines do you want from a ...
3
votes
5answers
336 views

Website Layout - different background colour sections with full width

Recently I have seen a lot of new websites have been redesigned that each paragraph or section have different background colour with full width. For example: http://theme-fusion.com/avada/ What ...
3
votes
3answers
89 views

Inline actions vs grouped actions

I have a page with a number of different lists on it. Each list has the option to add a new entry. Would it be better to have the actions in a separate 'action area' or position them close to the list ...
1
vote
1answer
43 views

Where to put information about an app?

I am creating an Android application where users enter in their GPA, SAT, and ACT scores and select majors that they are interested in. The output shows a list of colleges in descending order of how ...
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. ...
0
votes
2answers
32 views

Thinking about splitting out similar processes. Dilemma

I am working on a project that involves sending messages. Messages come in two flavours - a simple quick message and a full message (or campaign) which includes some additional information. I am ...
5
votes
3answers
241 views

Should all fields in a web form be the same length? [duplicate]

Attached is a screenshot of a web application I am building. It shows where the user can enter input to perform a search. My question: should the text boxes/comboboxes all be the same width? The ...
0
votes
1answer
62 views

HTML/CSS Type Over Video Slider

I'm working on a project where the designer wants tailored and styled type (i.e. CSS) over a video that's in a slider. Along with a png logo. Each video slider will have a different layout treatment. ...
1
vote
2answers
73 views

How to show Text only post in masonry blog layout and keep the things symmetrical?

I have designed a masonry layout for blog but what if image is not posted for a blog post. What would be the best way to keep the symmetry intact leading to better pattern, hence UX. I thought of ...
2
votes
1answer
158 views

Best type of thumbnail?

Let's say I have an app that accepts images, and the user takes the above image. Now I want to upload it, and display a thumbnail of the image on my website. There are two ways I can have a ...
3
votes
1answer
69 views

The main user action on my page is importing files, does it matter that my import button isn't next to my select files button?

Please consider the admin screen below: One of the tasks on this screen is to import a file. However, the import button is located on the toolbar rather than next to the form. Would it be clearer to ...
2
votes
2answers
235 views

How to make complex settings simple and easy to understand?

I am trying to create a SSD dashboard for our software applications that show all the services listed and their current statuses similar to http://status.aws.amazon.com/ or ...
0
votes
1answer
99 views

How to depict an OR and an AND graphically?

So currently I have this basic layout for my UI: Where the '1' and '2' would be replaced by icons depicting a type of place (eg. supermarket/restaurant respectively). When the user first visits ...
0
votes
2answers
122 views

Alternative to modal error messages with only one button

We are rewriting our desktop application and we are thinking of improving the error handling and error notifications. Currently, it is based on modal dialogs. But we have a lot of errors like "You ...
0
votes
1answer
46 views

Making exceptions on global website paddings on specific pages

I am designing a web app that requires that I display a map and a scrollable sidebar beside each other..like you have on youtube. The design issue I have is that, across other pages, I have padding: 0 ...
2
votes
1answer
92 views

Best practice to show transaction history?

I am working on the redesign of a transaction history page. Existing design uses expandable data table to show the history of each item. the data set comprises over 8 attributes including the status ...