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

learn more… | top users | synonyms

2
votes
3answers
786 views

Scheduler Design with Slots

I am trying to create a UI design for recurring events. Example: John, cuts hair on week days monday-friday, from 02 Feb 2014 to 04 Apr 2014, only between 10 A.M to 1 P.M. Also he will do it ...
2
votes
3answers
176 views

Good way to show Application reminder on home page

I am working on a financial website where people can take loan, insurance etc. I need to display a reminder of sorts when a visitor comes back again on the home page showing that they have been ...
3
votes
3answers
58 views

Product links to multiple stores

The product in this case is an Album, and I am trying to decide from a few different layouts/interactions. The challenge comes from providing the options allowing user preference : itunes, amazon, ...
2
votes
2answers
114 views

Deal making interface from a menu

I have an interface where a restaurant owner can create deals from their menu. The way deals are created is as follows: Restaurants can add any number of deal items. Each deal item can offer ...
0
votes
2answers
71 views

How to layout a page with very long list of sub-navigation items?

We have these few pages that have an inner navigation but for some pages, the number of items are very long. For some pages, the number of navigation items are short. See below for the ones with a ...
-1
votes
1answer
74 views

What is the best way to display multiple columns?

I have been asked to come up with a solution for displaying 50+ columns that were previously viewed in excel and now need to be brought to the desktop application UI. Mobile version is out of scope. ...
17
votes
12answers
832 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 ...
0
votes
1answer
27 views

For an instant message program, should your messages sent be left or right side? [duplicate]

For many IM programs, especially text apps for phones, you can see a conversation with a specific person. To quickly distinguish between messages sent and received, they are pushed to each side, like ...
51
votes
8answers
6k 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 ...
2
votes
1answer
113 views

Mobile post page - next post fly out vs. static next post

I am working on a heavy content site. On desktop post page i have sticky sidebar that displays the next posts. On mobile at the bottom of the page when the post is over, the read next stories are ...
0
votes
0answers
31 views

“General” game GUI (not mobile)

Looking at the general layout of a lot(but not all) of computer games across the FPS/RPG/strategy genres the format usually follows a rough pattern; Menu = top left, Chat/log = lower left, Action ...
3
votes
2answers
218 views

Flashcard app - list or boxes?

I am making a flashcard webapp, and am deciding between using lists or boxes to represent the decks and cards. i.e., Lists Boxes (with create new deck/card box at the end) So far, my points are as ...
0
votes
1answer
69 views

Ideal default content area width for a site with tons of forms

I'm doing work on a staffing related website that uses lots of forms. The forms are pretty integral to every aspect of the site--from entering work history to filling out job applications. This has ...
4
votes
2answers
116 views

How to display nested categories of data without using nested menus

I've been put in charge of making a simple website. I'm also new to front-end web design and just design in general (I've always been a back-end programmer). I was given a document by my superior ...
0
votes
1answer
53 views

How to determine if something is 1 row vs 3 rows in bootstrap? [closed]

In the following layout, how do I determine if each element should be in their own row and column or if all of them should be in 1 row and 1 column together, but separated by line breaks? Is there ...
0
votes
3answers
126 views

1) Hiding and showing a dropdown in a form 2) Advantages and disadvantages of using a three-column form layout

I have a drop-down that lists org names. After selecting, it disappears and shows the org name (and address), with a command link to change it back to a drop-down. Is this good usability, and if so, ...
1
vote
2answers
86 views

Using Modals or Extra Tabs for Organization of Data

We have been trying to implement a web-based configuration system and we have been wondering about the correct design choice to layout the options. Our current Organization is similar to this: ...
1
vote
5answers
108 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 ...
1
vote
3answers
168 views

What is best way to show the select box data which is long(almost one line sentence)

I have list box to show the select box data which is long(almost one line sentence). I cant make list box which look very big. For all sentence I have can use some code(Say for 'Sentence1' I can use ...
0
votes
1answer
52 views

Indicating direction of an object using a basic string

I am trying to indicate the direction (left or right) of an object relative to a fixed point, which is itself located relative to a standard center, using simple text. This direction information is ...
1
vote
1answer
109 views

What makes this POS design look dated [closed]

We are planning to update the design of our POS screens, so I want to understand what is making them look dated. The screens currently have all the functionality that we need -- we are just focusing ...
1
vote
3answers
160 views

How to efficiently show lots of profile data in a glance?

We're in the process of creating an International Directory System for our Employees (which would provide details of Employees - summary of their education, experience, contact, and social media ...
1
vote
1answer
49 views

How to display adequate info without looking “busy”

So I'm making a section of a web page for an "event management" system. The system works as follows: The Organizer Email field is an autocomplete. You start typing an email and it performs an AJAX ...
1
vote
5answers
170 views

Style before layout or layout before style?

When designing something for the web, is it a better to focus first on the layout and then on the style or the reverse?
0
votes
2answers
49 views

Location of the site creator [closed]

I want to add "created by @my_name" or "by @my_name" but I don't want to put it in the footer or some other inconspicuous place. I decided to make this "fixed" on screen, but do not know where it is ...
1
vote
3answers
112 views

Indicating the presence of content below the fold in a mobile UI?

In my mobile app, I have a "Profile" section that the user has to fill in. It looks like something like this PERSONAL INFO SECTION HEADER (label) FIRST NAME (textfield) LAST NAME (textfield) ...
85
votes
5answers
12k 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?
3
votes
3answers
211 views

Good design for grouping labels on a form?

I have the following area on a form: I don't like the repeated words "Open" and "Date". To me repeated words just add clutter. I would like to have a way to group these together in some way. ...
10
votes
6answers
1k 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 ...
0
votes
1answer
94 views

How to best display this tree structure?

I am displaying a tree structure with Angular Material and angular-ui-tree as shown below: I'm not happy with the look of it (lots of white space, distance between buttons and text) but can't think ...
32
votes
6answers
5k 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
66 views

Organized catalog of “big” UI patterns?

I need to make some fundamental GUI choices and would like this process to be more formal. E.g. how do I make a decision whether a details view should be a collapsible panel or a separate window? ...
2
votes
2answers
735 views

Where should the submit button be for these type of compact forms? (bootstrap 3 module)

So, I'm creating a compact form module for bootstrap 3. The project is opensource on github. This type of forms are good in two ways: It's so 2014 and very user friendly on mobile devices. But Im ...
0
votes
2answers
58 views

Form Layout Efficiency if options to questions are all the same

Let me preface by saying that yes, I intend on doing usability testing with actual users. I am redesigning the UI for my company's product. On a particular form, the layout is currently: However, ...
1
vote
6answers
87 views

Active/selected members of group on the left? or right?

Given a web page with the classic "move items from a list on one side to the other", does it make more sense to have "active" on the left hand side of the screen? or the right? While Submit Buttons ...
2
votes
2answers
240 views

How to best display a lot of information or data on a single webpage?

Are there any "rules" or recommendations in UX Design for displaying a lot of data on a webpage? Or how to select the most needed information to display data?
0
votes
3answers
84 views

Should I try to standardize the location of help buttons?

I've created a dashboard containing a map. My client wants little help buttons on each of the panels so if the user has a question about what something my do in each panel, they can click and see an ...
4
votes
3answers
170 views

Contest-List: Separate site or simply scroll down on homepage

My webapplication concept is all about some kinds of contests in which users can participate. Each contest has a minimal amount of information that will be displayed while viewing the list. As for ...
0
votes
2answers
96 views

Website design / where to put simple links

i am developping a website with this exact same layout http://demo.nicethemes.com/paeon/ i have several pages like services/contact/faq .. etc wich fit perfectly with this design but i have also ...
167
votes
23answers
56k 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 ...
1
vote
3answers
105 views

Help on placing controls

I need some help on placing usercontrols for a financial app I'm working on (It's WPF but it's not relevant) I've created this wireframe I thinks this approach is an old style... and I need some ...
2
votes
3answers
92 views

Web chat button on every page or select pages?

While I would typically research this until blue in the face, Allas I cannot find any specific research dedicated to this topic: Our company (Gas and Electricity provider) is deliberating whether to ...
10
votes
3answers
3k 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 ...
0
votes
2answers
97 views

Best practice for dynamic form where user can split amount

I have a form in a web application where users may input bank operations. In this form, they have to put an amount, and they can, if they want to, split this amount into different "budgets". A budget ...
10
votes
4answers
939 views

What's the best location for a Continue button on multi stage Mobile App?

My app has multiple pages, each page the user adds info and continues to the next page. Where is the best place for the Continue control? Bottom & Centered for hierarchy or top right for ...
5
votes
5answers
579 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 ...
1
vote
3answers
149 views

Group rows in a table

It is very common to see tables on web applications nowadays but is not that simple to see tables with groups of rows. I have a table which can have multiple groups of rows. Each group can have from ...
1
vote
2answers
72 views

How to show row related information

I have a grid of selectable rows. Each time a user selects a row a new panel will come from the botton of the page to show its related "Events" and "Comments". This way they'll be able to access ...
211
votes
19answers
45k 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?
23
votes
7answers
3k 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?