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)

2
votes
0answers
29 views

Design of a UI which has multiple Categories, where each Category holds individual Settings

I'm new to UI Design and I having a hard time designing a new Concept for a UI. I can't give you full detail about what the application is for but it's basicly a production-planning-tool for ...
5
votes
3answers
96 views

How to offer multiple filter options when technically constrained to one?

The Scenario I have 2 filters - Filter 1 and Filter 2. In Filter 1 users can either select multiple tabs or enter something in textbox and click Search Tag button. Doing this will do ajax call and ...
1
vote
0answers
65 views
+50

Designing an expandable UI with plugins

I'm working on a game server, that will allow mods and plugins to be installed. I am also working on a creation kit, or content management suite, to aid in the design of various aspects of the game ...
1
vote
2answers
59 views

What is the best way to show additional information on a single word in a block of text & how should the user know about it?

If I have, say, a long paragraph of text and there are certain words that I want the user to be able to tap to reveal a lot of extra information but within the same page, how do I do it ? ...
5
votes
5answers
1k views

Multi-range Slider for Budget Allocation

I'm currently designing a slider that will be used to allocate a fixed budget to different channels. I posted some shots of the current design below. Right now, it's possible to simply drag the slider ...
1
vote
1answer
58 views

Advice/resources asked for designing a sort of “tasks to complete” layout

I'm creating a site where a user has to perform several tasks on his own. The theme lies close to a market place site where a user puts something online for sale. Think about uploading images, ...
2
votes
2answers
2k views

What UI design pattern for choice between 2 actions comes to your mind?

My goal: find optimal UX/UI pattern. Pattern's goal: give a user choice between two actions. Simple example: http://dribbble.com/shots/599154-Choose-Your-Option Here is UX/UI pattern I implemented ...
3
votes
1answer
80 views

Usability testing of GNOME Shell?

I've searched around the internet in vain for usability studies that would validate the controversial design of GNOME Shell. Has anyone else had better luck or would know where to look?
0
votes
1answer
38 views

Material Design Icon to represent spots left at an event [on hold]

I'm looking for a material design icon to represent the amount of spots left at an event and struggling.. Any help would be verrry much appreciated. Thanks!
1
vote
2answers
18 views

Save untested connection when testing is possible?

I have an admin console where I can add configure different data sources for my web application. The page looks like this : Some of my queries are : What is the ideal scenario for test and save ...
4
votes
4answers
2k views

Material Design for Web apps?

I'm working on an admin portal (angular, jquery, bootstrap..) and I'm pretty comfortable with bootstrap and I think that the bootstrap designs are pretty cool. Now, my colleague insists on changing it ...
1
vote
1answer
49 views

Compact Tableview

I'm currently working on a web application that includes a kind of table where each row can be expanded and collapsed, respectively. I added the picture below that you can see what I mean: Now all ...
0
votes
0answers
45 views

Better UX for categorization and setting up parameters

I'm building a UI, and I couldn't find a better/more intuitive solution for putting elements into categories, and then setting up parameters for those elements depending on which category it belongs ...
28
votes
4answers
3k views

Is there an obvious way to signal that an action leads to a confirmation?

For instance, a "Delete" button leads to a confirmation message of "Are you Sure - Yes / No". Any tips to make people aware of the fact that clicking on "Delete" isn't a final action. EDIT: I ...
1
vote
2answers
64 views

Page navigation help for business application site

I'm making a UX/UI for email service provider software and I'm stuck on how best to do the navigation/controls for this page style: first, you view your email campaigns second, you check a box ...
1
vote
2answers
233 views

Display hierarchy of mutually exclusive options

INTRODUCTION: I am a software developer with no experience with UX/UI. In original application I worked on, I had 4 mutually exclusive options from which user had to choose one. I used the below ...
19
votes
5answers
3k views

Should I use country flags in language selection fields?

My users can create content in different languages, and I need to provide an option to choose the language when they enter new content. Right now there are only 5 languages (en, fr, de, pt, es), and ...
58
votes
8answers
9k views

How should you show that an accordion is expanded?

When you have an accordion, you need some way of showing the current state is expanded. There are a number of different ways of handling this, and each is used by a number of respected websites and ...
1
vote
1answer
66 views

UI/UX for Comparing items based on parameters side by side in an Android App

What is the best UX/UI for comparing three to four products based on certain set of parameters in Android app. The audience is predominantly an Android phone in portrait mode. Basically users should ...
2
votes
3answers
66 views

How can I summarize the contents of a mathematical matrix in a single text field?

Here's a question that pertains to UI design, but for an application geared at a more technical audience. In my application, users can assign an object properties of several types. These types ...
10
votes
4answers
2k views

Counter in a corner of a button

I'm creating a user control which is essentially a wide tile-like button (think Windows 8 "wide" start menu tiles), but in the upper-right corner there's a darkened area which contains a counter. This ...
22
votes
1answer
2k views

What is the information that's always present in a toolbar called in UX lingo?

I remember reading about this type of information displayed in a toolbar before, but I can't recall or find it on the web. Ideas?
1
vote
0answers
40 views

What's the key information in a cashback UI

I am building an interface where users view details about cashback they receive for x. The cashback is supposed to be re-used within the application for ordering x again. As I understand it, the ...
5
votes
4answers
165 views

How to distinguish between progress and consumption visually?

I am working on a product that shows how much time the user has consumed . To represent this visually I have used a reversed progress bar but it still feels like a progress bar , increasing. Are ...
21
votes
5answers
17k views

What are the real differences between UI/UX and front-end development?

front-end developer here. I'm working in a tiny startup: one back-end developer and me as the front-end developer. My boss is calling me UX boy since I've worked there, even if I don't specially ...
1
vote
1answer
107 views

mixing multi select and single select in one list of ajax results

I'm designing a mobile app (android + ios) I'd like to have a page where you can type in a search bar, and get a list of (ajax) results you can choose from. the results are a name, with either - ...
3
votes
1answer
60 views

Web tools to show a comparison between two values? [closed]

I would like to compare two values and show a comparison (or a variation) between the two values. Here is an example in my desktop app: This app is developed in Delphi so I don't have a lot of ...
8
votes
5answers
895 views

Why do web designers force users to enter credit card numbers without hyphens or spaces?

Credit card numbers on the cards themselves seem to follow a pattern--four clusters of digits separated by spaces. This seems to comport with "human factors engineering" that I think shows people have ...
1
vote
2answers
98 views

What are the advantages of websites (eg:Gmail) not using a cursor:pointer for interactive elements?

Taking the example of Gmail, when you hover over "Sign out" or "Add account" buttons the cursor is instead of Is there any particular reason behind that? There are clear drawbacks (less ...
0
votes
1answer
35 views

Rolling calendar view - choosing a start date

I'm currently building a web app that allows users to register as course attendees. Obviously, one can't register for past courses, and we would like to prevent registration in courses beyond two ...
1
vote
1answer
100 views

Best resources for modern mobile app UI design? [closed]

I am a product manager for a mobile app on iOS and Android. The app is called RockMyRun. It's a music streaming service for the health and fitness market. Our design principles are bright colors, flat ...
1
vote
0answers
33 views

Best way to create responsive sidebar content [closed]

I'm working on a project that I would like to be responsive so it can be used on mobile devices. A major part of this project is a content-design area that has a lot of "tool" options and parts that ...
3
votes
5answers
754 views

Improving the “booking page” for a taxi booking mobile application

I'm currently working on a taxi booking application and have got to the stage where I need to design the "Book" page where the user can create a new advance taxi booking. The features are as follows: ...
3
votes
2answers
152 views

Resource recommendations for designing graphical + command line interfaces?

Perhaps one of the most prominent examples of a combined GUI + CLI is AutoCAD. AutoCAD has reached the point where (almost?) everything that can be done with the CLI can now be done with the GUI too, ...
3
votes
3answers
246 views

Should I write a title next to a button icon?

Is it necessary to write what a button is if you have a picture? This is a very general question, and I think the answer to that would be: It depends how clear the image is. So my question is if the ...
4
votes
4answers
147 views

Is top navigation an accepted pattern for mobile devices?

I have always found the bottom nav bar to be one of the worst UI conventions in common practice, as it is a violation of information hierarchy. Of course, the hamburger menu is also universally hated, ...
1
vote
0answers
29 views

Where can I find best practices for user interface design and layout of smartphones and tablets? [closed]

Phones and tablets have an expected UI - when you power on the device, you see a background overlaid with icons for your apps. It's become ubiquitous for any smartphone and tablet. How can I find ...
2
votes
2answers
209 views

What is the name of the two sections at the left and right of this “classic” Web UI?

This question may sounds weird but I was wondering myslelf if the two sections at the left and the right of an UI had a special name (like header or footer for the top and the bottom parts). ...
5
votes
2answers
100 views

Support for conversational user interfaces

Reading some of the more recent articles on Medium about conversational user interfaces seems to suggest that this is already an emergent trend that will set the scene for future interface design. ...
25
votes
7answers
22k 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 ...
3
votes
2answers
99 views

How to record multiple goals in score-keeping app?

The image below shows an application for creating football (soccer) match reports, specifically the section for recording the goals scored. Note: This UI is for recording scores after the game, not ...
0
votes
1answer
100 views

Proper UX on a Widget dropdown menu

I am designing for a piece of web-based software that has a drag-n-drop functionality for "widgets" that can be placed in one of three columns. Over the 2 years of development the list of widgets ...
44
votes
14answers
9k views

Best color to display hot/cold but also on/off

I'm not really sure about some colours of one section of the application I am writing. Basically, I need to have a section that displays if something is ON/OFF, but also HOT/COLD. Now, usually, I ...
1
vote
2answers
188 views

How to design UI for using barcode scanner for add/remove functions

I am using a Bar-code scanner on my mobile app (Android) to update items at a remote server. The user can either want to scan to increase the item's quantity by 1 or decrease by 1 each time they scan. ...
2
votes
2answers
92 views

Intuitive representation of “increase priority”

IGNORE THIS BLOCK We have a grid, each row represent a pending download. By default, downloads will proceed top-down, first row first, second row after that, etc. We want to put a ...
1
vote
2answers
168 views

Best practice GUI for a report designer where there is a many to one relationship to the data

I'm having trouble finding any best practices for a report designer when you have some data elements which repeat multiple times within a single report. Every report design best practice seems to ...
0
votes
1answer
78 views

How can I improve this master detail/grouping UI?

In my application, I have to represent a Work Order entity that has N Work Order Sections and each section has M sub-items. Currently, I'm representing this like so: Each Work Order has a bunch of ...
1
vote
2answers
325 views

What's a good mobile navigation strategy for hierarchies with few children?

Say your IA hierarchy is like this: Main section A Feature 1 Feature 2 Feature 3 Main Section B (List/tableview) Item Detail 1 Detail 2 Detail 3 Main Section C The traditional iOS-style ...
3
votes
1answer
65 views

Sort Icon placement

I am introducing a sort feature for a few elements such as: Name Import Code Site Priority I did some Googling and the general concensus is that an icon should always be placed to the left of a ...