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)

0
votes
1answer
49 views

Best way to combine two-step service request screen and minimise cognitive load

I am currently working on a service aggregator app as part of a university project. One of the main difficulties I am having at the moment is figuring out how to allow the user to carry out a search ...
-1
votes
1answer
51 views

Relational query (few parameters selector) more user friendly

I am working on GUI of one website which is selecting data from database. User can enter one or two values if wants output above/equal/lessequal and less etc. or/and certain thresholds. Current idea ...
3
votes
2answers
261 views

Best way to lay out home page of mobile app

I'm redesigning a mobile trivia app, and on the homepage, there are radio buttons that let the user choose the difficulty, and then there are also 3 buttons that start the game. The current layout ...
0
votes
2answers
68 views

How to handle complicated monthly repeat options

This is related to this question I asked here earlier. I want to handle the full range of options for monthly reminders in my Android app. So I handle: Repeat on the day of the month (e.g. the 17th ...
0
votes
0answers
20 views

Navigating through configuration screens for multiple items

I have an Android app whose data model is built around a list of reminders. The user's primary interaction with the app is based around creating and modifying these reminders. Currently my app opens ...
3
votes
1answer
61 views

Best approach to toggle button & Placeholder for date?

What is the best approach (i.e to add some icon or text etc) to show user that this section/button/menu is toggleable or we have more option on left or right on the controls? Right now I'm using ...
3
votes
1answer
99 views

Reference for Spanish UI [duplicate]

Is there a good reference for UI terms in spanish? Terms like username, password, login/logout, etc... aren't direct translations. I'm looking for a guideline to translate these labels. Update ...
1
vote
3answers
74 views

Integrate location navigation into site

In our classifieds site we search by a string (ie. iphone) and we see the search results, as seen on the screenshot. The initial search displays everything in the United States. To this search ...
3
votes
1answer
116 views

Can sign up/log in be unified in one button?

I'm working a form at the moment and was consider merging sign in and sign up but thought it might be confusing. Is there any precedent for this? Example download bmml source – ...
5
votes
2answers
205 views

Best design to display a school timetable

I'm trying to figure out what is the best way to display a school/subject timetable. When designing a timeline it's sensible to use time as columns across which will indeed define activities across a ...
0
votes
1answer
137 views

How to show sleeping on a slider?

I'm developing an application for a client that asks lots of questions to determine compatibility between people. Unfortunately, the questions vary greatly, as they can pertain to sleep habits, ...
-5
votes
1answer
70 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
195 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
85 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. ...
9
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 ...
16
votes
4answers
803 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
197 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 ...
0
votes
1answer
161 views

Web GUI pattern: How to design complicated multi-level nested forms in an ERP system

I am on designing an ERP application. We have many forms with nested objects inside and many form elements. I tried to design the form like this example. But it seems that showing nested forms and ...
2
votes
1answer
28 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
257 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
108 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
79 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
166 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
182 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
80 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
47 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
129 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
172 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
143 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
152 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
1k 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
17 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
68 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
96 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
266 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
81 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
109 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 - ...
21
votes
7answers
14k 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
289 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
98 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
323 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
57 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
249 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
54 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
186 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
84 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
46 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 ...
20
votes
13answers
13k views

What is the difference between Wireframing and prototyping

What is the difference between Wireframing and prototyping? Prototype should be interactive and Wire-frame Static? Am i right?
1
vote
4answers
203 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 ...