Graphical User Interface design (GUI-design for short) refers to the visual aspect of designing computers, appliances, machines, mobile communication devices, software applications, and websites with the focus on the user's experience and interaction. Generally refers to digital rather than physical ...

learn more… | top users | synonyms (1)

-8
votes
1answer
116 views

Designing password entry to provide hints

Should it be way that the interaction is designed for password field in any web form or login page? Can it be the right way to showing total number of character of a password while user enters it? ...
2
votes
1answer
205 views

Bold colors for mobile applications [closed]

I am aware that normal convention would have designers use more neutral colors for a mobile application. In terms of entertainment based mobile applications: Is it acceptable to follow a more bold ...
1
vote
1answer
124 views

Form image selection (upload / gallery / default)

There is an image (1 img) selection option within a form with 3 choices: 1- User uploads the image from computer. 2- User can select an image from pre uploaded images. 3- User selects a default image. ...
10
votes
3answers
2k views

Flat design worsens UX. Could/should the pendulum swing the other way? [closed]

I often argue with people that so-called 'flat' design leads to worse UX as it leads to a lack of clarity regarding actionable objects but also reduces the ability of the user to distinguish between ...
17
votes
4answers
929 views

Why do scrollbars revert to original scroll distance when mouse is dragged sideways too far?

When dragging the scrollbar using the mouse, the contents of the scrollpane move up and down as the bar moves with the mouse. But if you keep the mouse button held down, and move the pointer sideways ...
3
votes
1answer
236 views

Best way to represent time related event during a day in a graph

I want to represent time-related events graphically (bars/chars/graphs, etc). I have a log in the administration panel, the data is login times for admins, so each admin has online-offline ...
2
votes
1answer
38 views

Dividing items in variable number of groups

In my application, a user gets a list of items and needs to divide these in any number of groups, with some additional restrictions (between X and Y items in a group, etc.) Currently, the application ...
2
votes
2answers
274 views

Floating animated message vs. confirmation message. When to use each?

Some pre-clarifications: By floating animated messages I mean the Firefox style messages usually appearing bottom right of the window, for example, when a file downloaded successfully. By ...
1
vote
1answer
150 views

Best way to show the user a div have more details, will be shown upon click - arrow/grid icon/'>>'/'more details'?

I have Four divs on my homepage. Every div is showing a number and a indicator. But I have further details for each of the div which will be shown upon user click. Now I want to know what is the best ...
2
votes
2answers
84 views

How to differentiate a Div from rest of the div on same row having same look and feel ? border/shade etc?

I'm working on a web application where I have 4 result types of a data and I'm showing all four on the page in same row with same look & feel of divs (can be seen in picture). The Box_D result ...
1
vote
2answers
230 views

Background Grid lines in charts are good or bad?

I'm using different charts (Line & Bar charts) in my Web app. I want to know whether background grid lines are good to have in charts or not? Does these lines distracts user attentions from main ...
4
votes
3answers
243 views

How to make a user think a div is clickable ? shadow/Hand cursor/color change?

I have 3-4 divs on my home page with some information (i.e. A Big Number, indicators). As I cant put all the information in the same page but I think it will create cognitive load for the user so I ...
0
votes
2answers
105 views

“Slider” with relative motion? What is this called?

I'm looking for control that allows relative motion. This isn't what I'm using it for, but you could consider it in the context of a volume control. My requirements: There is a range of ...
0
votes
1answer
55 views

Dealing with multiple items at once in a single window

I am working on a web app in which one of the features requires a taxi operator to respond to/make multiple customer haggle (barter) requests for a fare. This all needs to take place within a single ...
1
vote
2answers
174 views

Show a donation progress bar?

I'm going to put a donation system into my web-app because I need to raise about $6.2k for a school-organised trip to Borneo. Inside the app, I think that I will tell everyone, on the donations page, ...
2
votes
2answers
439 views

Is it better to label input fields, watermark them, or both? [duplicate]

When building forms, you need to effectively communicate with the user what information should be placed inside of the text boxes. I've seen a combination of watermarks in text boxes and labels for ...
1
vote
2answers
278 views

What is the name of this dial/spinner-like interface element?

I've tried googling both spinner and dial, but they turn up results that are not this. I need to implement this in a website, and would like to know the pattern for it -- it's just so much easier ...
2
votes
3answers
185 views

Make click, drag and drop and link between both tables more obvious to user

The two tables in the window below are intrinsically linked. Their purpose is to help the user to quickly allocate a pickup job to a driver. In order to do this, the user simply needs to click on ...
6
votes
7answers
2k views

Do people still use drag and drop?

Is drag and drop (for say photo uploads) a good idea? Aren't users frustrated by all the steps you have to take? Do most people even know how to do it? Open a window Browse to your files Ensure ...
0
votes
0answers
22 views

Breadcrumb dropdown navigation examples? [duplicate]

I'm trying to find websites that use some type of breadcrumb navigation with dropdowns. I was looking at this post from 3 years ago, but it seems that the sites mentioned here have changed their ...
1
vote
1answer
126 views

What widget should I use to filter table rows based on checkboxes?

Suppose my table has a column on the far left that consists of only checkboxes used for selecting rows. The default design is that the header of that column would have a checkbox, which would be used ...
0
votes
1answer
161 views

Progressive Disclosure: Accordions, Carousels, and Cards

I'm working on an internal business tool. It needs to be information dense, and our users are internal employees who undergo training, so if it comes down to it, we value efficiency over ...
2
votes
4answers
278 views

Name, icon, and color of the button

I want to clear the text from the text box, what should be the button named as? what icon and color should the same button have? Thanks in advance.
1
vote
2answers
97 views

How to make a call-to-action element for mobile?

I am building a mobile website (lets say for for boutique hotels). There will be a form, where users will be able to enter the hotel name, email address, wanted dates etc... Since I will also have ...
0
votes
3answers
119 views

Display related location points on a map

I'd like to display an array of various location points, that share the same group. I've been tasked with designing a visual UI that houses a Bing Maps screen and displays several (location based - ...
23
votes
7answers
18k views

Use up or down arrow to represent “sort ascending” at table header

To represent "sort ascending" (a -> b -> c -> ...) , my first sense told me that, I should use ↓ to represent it. This is because if I lay my data a b c It seems like thing is moving naturally ...
2
votes
3answers
342 views

Drag and drop direction

I am designing a function where the user is able to drag items from one list and drop them in two others. I was wondering which direction is indicated for that action. In the first case, the list with ...
0
votes
2answers
141 views

Icon to depict quality? [closed]

I'm looking for an icon to represent "high quality." I'm thinking of using a diamond shape. Is there any reason to think that a diamond does not represent high quality?
0
votes
4answers
330 views

How to make connected lists on a website comprehensible for non experienced users

We have two lists on our website. One on the left listing activities, one on the right listing resources. When clicking on an item on the left list, more information about the activity is displayed ...
1
vote
1answer
63 views

Key features in modern designs [closed]

What key features/looks in an application represent a "modern" design? When you look at an application what gives you the sense of modern?
3
votes
2answers
272 views

How to make a “prices” UI?

I am building a website that offers 3 different pricing method. The only thing that differs between the 3 options is the period range. For example ( lets say car hire): under 1 week - 10$ per day 1 ...
3
votes
1answer
67 views

is it bad form to mix url popovers with url modals?

I was just curious if there are any rules around mixing url popovers with url modals? For example, there may be a few urls in the footer. A "Terms and Conditions" url may be used to display a ...
1
vote
4answers
200 views

Is it a good practice to place primary content below the footer?

What are the principles, use cases, and/or motivational factors behind placing content that pertains to the main body of the site, to instead exist below the footer? I want to better understand the ...
0
votes
2answers
97 views

How to let user know about different formats to enter a field in a form?

I'm designing an input field for IPv4 addresses and netmasks. My problem is that when you enter a IPv4 address with its netmask you can type "192.168.0.1/24" or you can type it like "192.168.0.1" and ...
1
vote
1answer
51 views

Long Input in an editable field

In my web app I have an input field that is editable by click and the author is unable to view the full title if it is too long. A good example is the Title field of "Ask Question" in this site. If ...
2
votes
4answers
410 views

Most appropriate UI for age range slider

We're creating a slider to allow users to select an 'age range'. The facility is to recruit users based on certain parameters. For example, I want users: Who live in the UK Is female Is aged ...
0
votes
0answers
82 views

Best way to express relationships in a Tree View?

I understand that a tree view is used to express a hierarchy and relations and for grouping but I'm struggling with what if two things in different groups on the same level have a relationship and how ...
2
votes
1answer
149 views

Redesigning workflow of bidding application to reduce cognitive load

I am currently working on a pet project to port and redesign a native Windows-based app onto the web. It acts as a booking aggregator, providing a platform for service operators to bid, share, and ...
2
votes
1answer
303 views

Presenting a list of sequential actions in a Windows application

I'm programming a small PC app which is mainly used to perform a set of sequential, step-by-step actions, and I wonder what would be a "standard" way to design its UI, so it would follow conventions ...
3
votes
4answers
483 views

GUI for a add-and-combine workflow?

I have the following scenario: the user picks a set of entities from a palette (each palette entry can belong to a different class, and each class can belong to a different subclass). After ...
1
vote
1answer
135 views

The best way to show several related tables

I have three or four connected tables, and I really wonder what's the best way to lay them out in a page? One table is for Roles. Second table is for Users. Each role might have several users and ...
1
vote
1answer
163 views

What are the alternatives to dragging items to add to data view?

I have a list of items in a tree in a column on the left of the page. Each item can be added to one or more views by dragging the item onto a view on the right of the page. This is proving to be ...
7
votes
4answers
479 views

Ideal control design for boolean flags?

So I've been tasked to find a way to "pretty up" an originally checkbox-based interface and in the process of doing so I've mocked up three designs (seen below). From top to bottom we've got a toggle, ...
0
votes
2answers
211 views

How to make a good UI for picking dates period?

I have a website form in which user can enter details of a flight he wants and my website will scan flight companies to find a flight that matches user's criteria. One of the details user should ...
1
vote
1answer
154 views

Displaying sub-filters in menus

I'm struggling with this issue: I'd like to know options on how to CLEARLY display a sub-filter option in a menu. To better explain: the problem is that I have a set of data that will be filtered ...
2
votes
4answers
1k views

Which label text is good for “Enter email address”?

I'm about to place one text field in the log in area where user can enter email address and password for logging in, but I'm confused which text should I use for label and placeholder text? Here are ...
3
votes
5answers
563 views

Should a 'delete image' button be on the top-left or top-right?

I am working on an application that allows status updates related to the application. It is very similar to posting a Facebook status so I have been using a similar layout to their posting screen. ...
6
votes
4answers
270 views

In a form, is Switching between advanced to basic a good idea?

I have a web page/form which users have to fill in before clicking the 'proceed' button. Same old story I guess. It looks like this: report name: [...] report type: (*) PDF ( ) HTML ...
1
vote
2answers
508 views

Translating progress /navigation bar in questionnaire into good mobile ux experience

I have a series of questions, aimed at being an enjoyable experience, with a nice solution for the desktop already worked out, using a styled navigation bar, which doubles as a progress bar for the ...