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,797
questions
0
votes
2
answers
148
views
Is Balloon popup for mobile apps common?
Our mobile app has a screen with a button that updates a price when the user takes a picture.
In order to clarify any doubt that a user may have about the button, I want to add a description somewhere ...
CommunityBot
- 1
0
votes
1
answer
51
views
Is a loader useful in a complex multi-step authentication process if the app is fast and the waiting time is less than a second?
Is a loader useful in a complex multi-step authentication process if the app is fast and the waiting time is less than a second?
Some pro arguments I have in mind:
It’s an opportunity to create a bit ...
CommunityBot
- 1
0
votes
1
answer
231
views
Best practises for tables with header titles in both axis (vertical/horizontal)
For tables/matrix in printed paper is very common to see the 2 axis/header titles separated by a diagonal bar
Also common to see in printed probability/impact matrix
However, HTML or excel(AFAIK) ...
- 111
1
vote
2
answers
187
views
Matrix table with checkbox selections
I am creating a matrix data table which will allow checkbox selections. Here is a mock up I have come up with:
This fulfils two purposes:
User is able to see instantly which options have been ...
CommunityBot
- 1
4
votes
1
answer
68
views
Is it mandatory to have semantic names for tokens?
I’ve just started creating my color token library, and I’ve read and watched many tutorials on how to do it. Practically, all of them mention these three steps:
I have my primitive tokens (example: #...
- 37.3k
2
votes
1
answer
265
views
Blinking cursor on input fields and blinking time/timeout
What about the blinking time?
Should it blink eternally until the user interacts?
I see that on Firefox 117, the blink stops after some seconds whereas it doesn't on chromium browsers.
Is the timeout ...
2
votes
1
answer
281
views
UI Testing for multi screen setups
I was wondering if there was any tools/ systems, that are capable of simulating multiple screens for use on UI testing.
Context:
We are developing an application which can consist of multiple ...
- 2,233
1
vote
4
answers
306
views
How to show a segmented control and multiselect buttongroup at top of a list
I'm struggling on how I can present the following to my users and that they understand how it works:
In a desktop app, we have a 'Recent' phonecalls list. This list shows all calls that came in and ...
CommunityBot
- 1
1
vote
1
answer
333
views
Multi-select tree in which parent also is a child
I am working on a multi-select tree in which the user should be able to select all children of a parent. Normally you would be using the parent checkbox to do so, but in this case it should also be ...
CommunityBot
- 1
0
votes
2
answers
226
views
Is a good user experience to display actions on the top of the screen on the web?
Navigation on the top of the screen is common on the web. To add actions like "Edit", "See details", "Copy" in the navbar is more specific on the desktop.
Fluent UI, ...
CommunityBot
- 1
1
vote
1
answer
74
views
Hiding the delete button behind 1, possibly 2 clicks
I have to anonymize this substantially, so forgive the abstraction, but here is the debate.
There is an interface in which you can create an object. This object has several attributes, as well as sub-...
- 12k
2
votes
4
answers
176
views
Radio vs checkboxes
Can I get thoughts on which pattern is better (internal debate at work as to which we should be using)...
Developers favor radio buttons as there's no need for any error handling.
Thanks
- 11.4k
0
votes
0
answers
34
views
How to scale typography and UI for different mobile device resolutions?
We have an iOS and an Android tailored application. We noticed that on small devices, the UI becomes very large with texts not fitting properly, either truncating or going to another line (this ...
- 31
1
vote
1
answer
323
views
How to properly expand/collapse the top level of a side navbar while using the second level nav bar?
so I am designing a device manager with a two-level side navbar, where the second level is constantly showing while the top level is hidden. I am having trouble deciding on how to design the expand/...
CommunityBot
- 1
1
vote
1
answer
78
views
Persistent Rich Tooltips
Material Design has rich tooltips which can also be persistent. As it's explained here, these tooltips:
remain active even when leaving the target region
can contain links
only disappear once you ...
CommunityBot
- 1
12
votes
3
answers
2k
views
A better way to display a forum thread
I want to figure out a better ways to make a forum thread easy to read.
Common solutions to this:
A flat thread where every post is sorted by time.
This is easy to understand and easy to display in a ...
CommunityBot
- 1
2
votes
1
answer
95
views
Solving accidental clicks
Sometimes when a window is bring to front by the system, I click a button or other widget accidentally when my intent is to click in the window which was covered by the new window.
For example suppose ...
- 440
0
votes
1
answer
40
views
How to let users know that they can save more images in history bar?
I'm designing a UI for an image editing tool. Right now the history bar looks like this. Users can decide whether they want to "save" (button) or "delete" (button) the image when ...
CommunityBot
- 1
1
vote
0
answers
26
views
Multi-level configuration editor
Background
I have limited experience in GUI design, but I have to produce a desktop application (Qt) meant for expert users (our own staff mostly). Its purpose is to read/write a large set of ...
- 11
0
votes
0
answers
29
views
How to expand data table when only 2 columns have data that can be expanded on?
I have a data table where you can click to expand upon the row. Two out of my four columns have data that can be expanded upon if the column is set to enabled. If disabled, there is no additional data ...
- 26.7k
8
votes
7
answers
5k
views
Toggle Switch position the right way?
Just having a debate about what is the good position for an activated toggle.
Also looking for some answers why left? why right?
To me it makes sense to have it on the right when activated as it's ...
0
votes
1
answer
95
views
Should I include ... at the end of input placeholders?
I've noticed designers using "..." at the end of inputs or search bars placeholders ("Enter your email address" vs "Enter your email address...") seemingly at random. Is ...
CommunityBot
- 1
12
votes
7
answers
4k
views
Convey to user that they can input absolute numbers or percentages
I have a quoting form in which I want users to have the ability to add a discount. The discounts can be added as percentage or absolute values. My current design is a text field and a dropdown for ...
- 1,194
0
votes
1
answer
72
views
Appropriate button label to preview a file before sharing it publicly
We're working on a platform that has these 2 sections:
Private files - participants in the call have their own private files section
Public files - Files shared here become accessible (to preview and/...
CommunityBot
- 1
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 ...
CommunityBot
- 1
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 ...
CommunityBot
- 1
4
votes
2
answers
146
views
Statistics (or tools) on screen calibration & readability
Fairly straight forward question, but I could not find any answers to it. Are there any known statistics regarding screen calibration & readability?
Are there any colors to avoid where screen ...
CommunityBot
- 1
3
votes
5
answers
1k
views
What is the best way to display user company role and application role when logged in to the application
An application having two roles i.e Company Role and Application Role based on which different sections of the application are accessible to the person.
Company Role describes either Admin or Users ...
CommunityBot
- 1
0
votes
2
answers
57
views
How to best showcase selected state of visually important elements
I'm creating a feature to select profile badge – how might I best showcase the selected state?
0
votes
2
answers
125
views
Clarifying template value vs. override value
We're designing a master vehicle inventory* settings template that can be overridden at the individual vehicle dealership* level.
The individual dealership Settings page opens in an Edit state so that ...
CommunityBot
- 1
67
votes
5
answers
54k
views
What is the optimum button size of touch screen applications?
There was a not so recent blog post about the ideal button size of touch screen control sizes (sorry there is no link, the website is now a spam trap) that was based on the study form the MIT touch ...
- 26.7k
0
votes
1
answer
437
views
Minimum table column width when resizing the column
In the table that I’m working on, user are able to resize any columns within the table. However, we would like to prevent user from resizing the column to a point where it’s like collapsing the column....
CommunityBot
- 1
0
votes
1
answer
115
views
A design to show the main items and related items of main
At present, my project display the main and related items separately in multiple interfaces, and use the combobox in the related item interface to filter the sub items of the main.
However, such an ...
CommunityBot
- 1
1
vote
1
answer
93
views
How can I make dropdowns more tied to the graphs that they control?
(question copied from https://graphicdesign.stackexchange.com/questions/162197/need-help-with-a-color-coded-design since commenter there suggested this is the appropriate forum)
I am but a simple BA, ...
- 41
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 ...
CommunityBot
- 1
1
vote
1
answer
128
views
Browse and select from a list at the same time
We're looking for a way to cut down on pogosticking - users popping back and forth between a summary view and various detail views. One pattern we're experimenting with is pager arrows, for when users ...
CommunityBot
- 1
1
vote
1
answer
37
views
Fairly Complex List Select Problem
Im wondering if you guys can add some expertise...
I have the following problem, and I would like to know if anyone here has any ideas or solutions.
Essentially, the user will create a post, and the ...
- 1,205
0
votes
3
answers
134
views
Is the standard notification badge color always red, or can it be something else?
First, I asked GPT what the standard notification badge color is. Is it always red, or can it be something else? GPT said that it can depend on the branding. If the brand's color is blue, then we can ...
0
votes
1
answer
28
views
Python GUI: visualise exoplanet transit and simulate atmospheric temperature
I've been working on a Tkinter GUI (first try with these sort of programming) to make it as easy as possible to visualise light curves and look for exoplanet transits in TESS and KEPLER missions (...
CommunityBot
- 1
0
votes
1
answer
38
views
Chevron / drop down to activate keypad
I want users to understand how to adjust the quantity of products.
We can't include a dropdown and allow users to input text. So for now, we're removing the dropdown and allowing text input only.
My ...
- 18.3k
0
votes
1
answer
72
views
Design suggestion for a register page via smartcard
Context
Developing a Login/Registration page
Security is very important
To reduce code complexity, I want to use just one controller and FXML page.
I want to create a form to register three users at ...
- 3
1
vote
1
answer
144
views
Entry point ("Item level" vs "Page level") and "Inline edit" vs "Edit page"
A project I'm currently working requires the user to be allowed to edit only certain items on the page. So the way the page is arranged now, a few items can be edited, and a few items aren't editable. ...
CommunityBot
- 1
4
votes
2
answers
2k
views
Best way to design dynamic table of inputs. Like rate-lists
I am trying to design a rate-list input for parking lot management system.
Where inputs are like this:
But it needs to be customizable in time field of inputs, e.g. 3-4 hours based on user ...
CommunityBot
- 1
0
votes
1
answer
69
views
Components in graph based UI with more complex interactions
Something that I noticed has become a feature of complex no-code software applications is the use of graph-like interfaces with more complex interactions such as the Unreal Engine 5 user interface.
I ...
- 5,299
2
votes
1
answer
214
views
What's this button/ thumbnail layout called?
What's this button layout called? I've been looking for the appropriate name for this layout so I can learn more about its use case and where it's best to be used but I've been dumbfounded for a while ...
CommunityBot
- 1
0
votes
2
answers
103
views
Problems with UI UX design for grid elements
i am facing a problem with my grid elements, the design is made to look good when the grid element is filled with long information, but it looks empty and filled with lots of white space when there is ...
CommunityBot
- 1
0
votes
1
answer
163
views
Making sorting discoverable on a table with no default sort
We have a table that orders results of clients (can be searched on name, address, email, phone, etc.) based on an algorithm, so there isn't a "default" sort we can mark with an arrow to ...
CommunityBot
- 1
0
votes
1
answer
13
views
Typeahead that makes it clear whether you've selected an extant entity or are creating a new one
We have a typeahead that lets users identify a dog in our database (by name) or specify the name of a new dog to be added to the database.
Is there a good UI pattern that helps make it crystal clear ...
CommunityBot
- 1
0
votes
1
answer
100
views
Segmented control vs toggle switch
We have a dashboard that allows a user to see all jobs belonging to their firm. These jobs are split into two tabs:
Upcoming jobs
Requested jobs (but haven't been yet been confirmed by us. Once it's ...
- 2,233
0
votes
1
answer
47
views
Good pointers for customers to encourage making a UI specification?
I have a customer that needs a small program made to do some simple tasks. I know pretty much what they want to do exactly, but our developer does not (external resource).
Customer just specifies what ...
CommunityBot
- 1