Questions tagged [gui-design]
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 design.
2,798
questions
2
votes
1
answer
146
views
Using only arrow keys, navigate from a scrollable gallery to action buttons
I have a gallery of images which scrolls vertically. There is no limit to the amount of images, so the gallery could scroll for a long time. Outside of the gallery, there are "action" ...
- 121
2
votes
1
answer
227
views
What is the best way to display "steps involved" in a UI?
I need to create a UI element for my website that illustrates how the main process works, using some steps. The element will have the header "How It Works" followed by three steps. However, ...
- 188
5
votes
2
answers
363
views
Stuck with my UI design
I am facing sort of a mental block while redesigning a new UI at my Job. The previous UI was not user friendly and we received a lot of feedback to make it better. Now, finally after 2 years our team ...
- 53
2
votes
2
answers
726
views
Decrease the font size or break to a new line with multiple languages?
I would like to know what is the better way to deal with the following issue:
A website supports multiple languages; some of them fit on one line of a container, while others do not.
Is it better to ...
- 21
0
votes
1
answer
136
views
Best design for product list page of an e-commerce website
I am working on an e-commerce website. I want to display the summary of search result and want to know which layout is the best?
The information that I am sowing are:
Ad title
Price
Location
...
- 237
2
votes
1
answer
69
views
What is the term for varying types of selection, and why are most apps either one/the other with no setting
This might be asked before, but I'm trying to create a feature for my design app that supports both methods of selection in this way. One mode should select all items that the bounding box even ...
- 123
2
votes
1
answer
116
views
Is feature to customize themes and colors for Mobile/Web Apps important for UX?
We are building a CRM like application but targeting micro businesses, consultants and etc.
While designing UI for our Mobile/Web App, my manager suggested us to inlcude themes, color and fonts ...
- 123
0
votes
0
answers
179
views
Good ways to show detailed info selecting from a table?
Lists (tables or grids) may hold much information behind the list. I have seen popup windows and split screens etc. Most of them works in a desktop environment, but on a small smartphone the detailed ...
- 121
3
votes
3
answers
293
views
What would be the better option for Grid items in App, Circular buttons or Rounded Rectangular buttons?
Currently I'm designing a mobile application where I need to display various categories for the user to choose and for that I have created two variations.
First Option is Item within circular shape ...
- 173
3
votes
2
answers
294
views
Design language and color choices by geography
We were doing a study/survey recently on an app which is expected to be launched globally (North America, Europe, South/East Asia).
The current design favors cleanliness, white space, and muted colors....
- 601
1
vote
1
answer
273
views
How to add multiple entities to send a communication message?
I'm designing an input component for selecting multiple entities (E.g. User and User groups) to send a communication message from administration page.
From my perspective UI-1 might create a visual ...
- 141
2
votes
2
answers
848
views
For a list of 10+ cards, Should I use a CTA button on each card for a better conversion rate?
Should I use a CTA button on each card for a shortcut knowing that I have cards feed layout pagination for more than 10 cards?
For example if I have a projects feed inside a freelancing app here're ...
1
vote
0
answers
196
views
Why does handlebar not appear consistently in the native iOS UI design?
Handlebars usually appear at the top of Modal View:
But in other system-level views, there is no handlebar, even if they functionally act like a Modal View. (For instance, this screen, where you can ...
- 11
2
votes
2
answers
3k
views
What should be the vertical placement of primary button on a mobile screen? And why?
A user scans the screen from left to right and top to bottom.
So, we use the primary action (or primary CTA) on the right side while designing for the web.
If we consider top to bottom scan approach ...
0
votes
1
answer
73
views
In a validator app, how to keep focus on the content you're validating?
I've got a specialized text validation application where the user can either type, copy/paste the text or load file in - then hit Validate for the screen to transition to the results area. Here's a ...
- 149
2
votes
2
answers
548
views
Change button text based on drop down menu
I want to change a button text based on selected drop down option e.g. Add UPC or Add Department etc. Is this okay design choice or is there better alternative?
- 145
3
votes
2
answers
517
views
Alternative to TAB layout to show three different pages connected
I have an app where from the home page the user enter in a page built like:
List of all registered documents from which the user can choose one of them and send it to the server with a bottom app bar ...
- 187
1
vote
1
answer
143
views
How to showcase additional menu level items within the current menu UI without breaking it
We have an app that lets users modify their face as they are taking selfies.
Under the Beauty option, users have the option to Smooth their skin, add Lipstick, edit Eyes, etc. The user can see in real ...
- 5,578
2
votes
2
answers
201
views
Advice on Displaying 24 Hour Opening
There's a similar question but it doesn't address the same issue so I have opened another.
I need to display opening hours to website visitors in a clear, easy to understand way. The business opening ...
- 171
1
vote
2
answers
1k
views
An alternative name for a Dashboard, with more functions?
We have an app that works in two separate pages. It involves sharing content and presenting information with other users. The secondary, optional (but highly recommended) page is called a dashboard. ...
- 11
0
votes
1
answer
297
views
Hamburger menu icons - Recent trend of moving away from three full-width lines to having two full-width lines and a shortened line?
Some examples in various iOS apps:
US Bank
RentCafe
Uber
The first two kinda reminds me of the icon for aligning text justified left.
I'm quite curious about the reason for this change. I couldn'...
- 103
0
votes
0
answers
32
views
Nice DB GUI for Lots of (ideally rich formatted) Text
I am designing a workflow processing system. I have many (hundreds) of workflows that in many cases are variants of each other and have related characteristics.
In the beginning development stages I ...
- 101
0
votes
2
answers
317
views
Best way to move items in a list when the list is paginated
I have a paginated list where the user drags and drops items to change the order. This list is paginated, so when the length of the list is longer than the page there is no clear way to move items ...
- 101
4
votes
6
answers
276
views
How to display a lot of necessary important messages
I'm looking for a clear way to show a lot of case notes for teaching staff.
Context is: this is for a page that teachers view when in class with their students. There is a Case note section that ...
- 1,741
2
votes
2
answers
351
views
Icons - clear way of presenting export and import action [closed]
I'm looking for a clear way of presenting "import jpg", "import svg", "export jpg" and "export svg" actions.
I want to make it clear by icon look, what is ...
- 494
1
vote
1
answer
40
views
Page to select similar products to Batch
I'm looking for a good UI suggestion in creating this page. From the above picture, as you can see there are two rows with same Model No:( B2FR150-150CF8Q1 ) others are different. I want to select ...
- 113
2
votes
1
answer
62
views
Usability of colour pickers in HSL format compared to RGB and HEX
Reading a recent article about HSL colour pickers being more user-friendly, I thought about the reason why the RGB and HEX colour pickers exist and who they are catering for, and it seems quite ...
- 26.7k
1
vote
1
answer
141
views
Three state check box (three real states, not indeterminate). A good idea?
I am making a budget tracking app that takes in your transaction history. In order to classify transactions, you can create Filters (eg Filter "fast food" = ContainsText("Mcdonalds"...
- 113
1
vote
1
answer
134
views
Q: How to differentiate two types of post?
I am new to UX design and I am currently developing a design prototype for our project. Our project sort of a social media + shopping website. For our website, there are two types of posts: shopping ...
- 13
2
votes
1
answer
92
views
Any best practice on how to represent player progress stat in a game?
I'm making a musical game where user should recognize notes and get faster at note reading. I'm in the designing process and I get quite stuck on the designing of the player progress on the level ...
3
votes
4
answers
304
views
How should I provide the “select nothing” option in my icon picker?
I work on a desktop application that lets people create visual scripts. They can add properties to objects, and every property can have a user-defined icon for easy identification. I have added a ...
- 1,637
2
votes
1
answer
74
views
Is filling the center-area of a GUI with several forms a good practice?
Center-area concept:
For a desktop application, we commonly find a similar structure for the GUI:
Top menu / Ribbon
Dockables left and right to explore the content and show properties.
Center-area ...
- 143
1
vote
1
answer
116
views
Same Side Navigation for bigger and smaller screens?
I am trying to find a way to navigate amongst rather complex content using an "admin" side navigation. The goal have been to use same navigation regardless of mobile or desktop.
Am I ...
- 121
2
votes
2
answers
206
views
Mimicry versus skeuomorphism to create an engaging user experience
In a recent article (in a series) relating to the use of 'materials' in the Microsoft Fluent Design System, I pondered the difference between the mimicry of physical materials in the digital medium (...
- 26.7k
3
votes
1
answer
97
views
Different views in table - omit column without relevance?
In a user interface, I am showing a table with a list of broken links and their context. It is possible to select the depth of the pages, based on the current page. For example you can show all broken ...
- 132
4
votes
3
answers
3k
views
Recommended maximum amount of columns in a table? [closed]
When designing tables I am always wondering how many columns are too much.
I commonly have tables that act as an overview of all the items, which can then be opened to show all the details. On one ...
- 148
1
vote
1
answer
147
views
Best layout/design for profile CRUD actions suggestions
I am currently working on a university project on an android app, that communicates with a device via Bluetooth and uploads profiles to it. So in the app I have a UI that provides different CRUD ...
0
votes
1
answer
345
views
Vector or raster graphic for UI elements? [closed]
Which type of graphic should I use for UI elements in web and mobile?
If I need to create @5x image size and then just reduce it or I need to create 1 vector image (like a button or icon) and just use ...
1
vote
5
answers
228
views
Restrict the user to login to an URL from mobile
I am currently working as a product owner for a web based application. We have a requirement to restrict the mobile uses to access our URL from the mobile. I would like to know the standard UI pattern ...
- 111
1
vote
1
answer
48
views
eCommerce -> After a digital course has been purchased, should I still show this course in category page?
I am developing an online course website based on WordPress.
Website has 30 courses in total.
Courses are divided into 5 categories (A, B, C, D, E).
There are 6 courses per category.
Each course ...
- 53
3
votes
3
answers
2k
views
Position of "required" asterisk in forms
Recently got into a heated discussion with my product manager about the placement of an asterisk * used for required fields in forms. He claims it must be positioned before the word, I say it must be ...
- 45
2
votes
1
answer
110
views
Best practice for meaning of "return" in UI flow
For context in this question, I am recalling a programmable thermostat interface with four large buttons, two each on the left and right side of an LCD display. The display showed labels for the ...
- 437
0
votes
2
answers
367
views
Do I need a laptop with 100% srgb color coverage for UX/UI design? [closed]
I know for the UX part it doesn't matter but what if I'm using tools like figma and creating wireframes UI elements do I need a top quality screen or will I be just fine with a cheap gaming laptop ...
1
vote
1
answer
77
views
Design of an open/closed interval selector
I have a idea to make an "open/close interval selector" to select the value range such as "[0,24)"or "[-1,1]" in mathematics.
[0,24) means "Greater than or equal to ...
2
votes
1
answer
80
views
Non-fullscreen sections overflow handling
The problem
I am creating a website with non-fullscreen-sections at the moment:
I am using a fullscreen-library to "switch" between the section when the user is scrolling. That way the ...
user141279
0
votes
0
answers
161
views
Holy grail layout solution that makes complex apps being usable on mobile?
What's the best solution for responsive holy grail layout in the context of complex responsive design?
Some common layouts done in this way
Hubspot CRM
Problem: it doesn't work on mobile as most of ...
- 853
0
votes
4
answers
72
views
Compact text indication of lost radio connection
I am working on a UI for a robotics application that uses radio communication. There is a text field for each robot that normally displays battery voltage in the format 3.72 V.
Sometimes the radio ...
- 101
2
votes
1
answer
53
views
page with 2 vertical sections in mobile
I have a wizard which contains 2 sections.
For desktop, the 2 column layout works well, but for mobile, the experience is not very user friendly. Any ideas on how I can improve this?
- 21
4
votes
2
answers
292
views
Color standards for seat booking
I am working on an application with a seat booking UI. Are there visual standards, colors in particular, for conveying the type and state of each seat?
Examples of seat types: standard, accessible, ...
- 165
2
votes
6
answers
231
views
How do I make it harder to click this button by accident?
The dialog box shown below constantly has me clicking the wrong button—despite the fact that I designed it!
The way it works is, the user types some text into the line edit box, and program output is ...
- 121