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
2
votes
1
answer
2k
views
What's the best way to display multiple tags/labels in a table row?
We have screen in our application which displays all files uploaded. Each file is able to be assigned tags (as many as needed) which can help with filter and search. Tagging is assigned via the ...
- 21
2
votes
3
answers
225
views
Is a slight icon inconsistency ok if the icons are clear?
So I am designing something that will tell the user whether something is online or offline. The problem is, I cant decide on a final design for my icons. The various designs look better on different ...
- 1,136
0
votes
4
answers
770
views
Hide premium features/content or show+lock them?
We are currently building a learning platform that has two membership tiers. Let’s call them basic and premium.
With premium you get quite a bit more features and access to additional content.
...
- 1
0
votes
3
answers
106
views
How to design with toggle options under a form that enable a feature
So I am designing a form where the user enters in an ip address and can either use just the IP address, enter in a range, or a netmask. My initial thought was to grey out the second form on the "...
- 1,136
0
votes
2
answers
247
views
How do you show multiple error messages specific per row of an XML import?
Currently, I'm working on an import function to migrate users from one system to our system.
I've checked the post input, and there is a possibility that there can be 39 error messages per person. In ...
- 75
0
votes
3
answers
277
views
How to show that an item in a form is dependent on the previous item
So I am designing a system where you can group different items together. A VNET is a group of edge devices, and in order to get the "TNI/Addr", you need to first select the VNET. I added ...
- 1,136
-1
votes
1
answer
87
views
What is the best approach for UI kit? [closed]
I have a dilemma at work and that is that we have many types of buttons: filled and lined black, light blue, dark blue in different shapes, round and rectangular with slightly rounded edges. We also ...
0
votes
1
answer
428
views
Best UX/UI for displaying a list of email addresses
I'm creating a component for a web app, and I'm looking for some advice on how to build a good UI, also considering UX.
this is an inbox page, so this page is a web email client. This app is not ...
- 109
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 ...
- 177
0
votes
0
answers
136
views
A time range on time range ui filter
looking for an intuitive way to create a time range on time range ui filter.
For example: a way to select last monday and this monday so as to compare between these two.
Or all wednesdays for the last ...
- 1
0
votes
1
answer
51
views
Is increasing an input search field width on click considered a cumulative layout shift (CLS)?
I'm trying to understand cumulative layout shifts. Are they just related to unexpected behaviour (for example, Javascript rewriting CSS or sizes), or does that include intentional shifts such as ...
- 853
0
votes
1
answer
59
views
Is it better to show all options or let user add options in a form
So I'm designing a tool for system administrators and one thing I am having trouble with is the large amount of info that is required for certain tasks. There is a section where the user has 4 ...
- 1,136
0
votes
2
answers
126
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 ...
- 12k
1
vote
1
answer
77
views
Is there a way to communicate both "End of list" and "No items in list" with the same verbiage?
I'm trying to figure out good verbiage to simplify list rendering.
There are two cases I'm trying to solve within a scrollable list:
Case #1 would be communicating that the user has reached the end of ...
- 111
0
votes
1
answer
207
views
Is it a best practice to place a button action column on every row within a web page list?
Let me set the stage:
Think of a web page with a pages long list of rows of data with a handful of columns.
Now there is work planned to add an action button column to this list such that every row ...
- 103
0
votes
2
answers
85
views
How can I make this habit tracker interface more visually interesting? [closed]
I'm designing an interface for a habit tracker app where a user can view a list of their habits for the day and tap a button to mark a habit as complete.
I think the habit containers (meditate, ...
0
votes
1
answer
96
views
Pause and cancel button next to each other?
So I am designing a feature for our app that allows users to pause, resume, and cancel their app's updates. I came up with a design that allows for the user to tap on the icon to pause/resume and ...
- 1,136
1
vote
2
answers
95
views
Variable App Colors (for Branding) and Accessibility
A feature that was sold to clients long before I joined was enabling use of custom primary and secondary colors in our mobile app. This allows their branding to be communicated to users for a more ...
- 11
0
votes
3
answers
141
views
Single input multiple choice UI
I am working on small project(web page) where a user can have two options to get results. But only one can be used at a time.
Being a noob with UI and stuff, I would like to know how to work on such ...
- 1
1
vote
2
answers
119
views
How would you design a UI for a form with selecting scheduled?
Sorry for the title, but I am a little bit exhausted here and I am not even sure if this is the right place to ask for help. I am making a Windows Desktop Application (C# WPF), it is the same as POS ...
- 141
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. ...
- 11
0
votes
2
answers
49
views
Designig a website for academic scholar audiences
I am a Software Engineering student and I was designing a website for my university Mining Engineering department that gives information about rocks. This website is going to be maintained by them ...
0
votes
2
answers
83
views
Show Related Items
What is a good user experience for a single web page that allows the user to add and manage 3 related things?
In my case I want the user to see this in the UI:
Property 1
Building 1
Apartment ...
- 101
0
votes
1
answer
76
views
What's the name of this 3x3 direction selection control?
I've noticed this control in a few places, but can't get google to tell me what it's called- what is it?
Text justification in Altium Designer:
Image anchor in Paint.NET:
And in Photoshop:
2
votes
1
answer
59
views
How to show two different ways to update the same router? (manual and automatic)
so I am designing a webui for a router and I am struggling with organizing the two different ways to update the router. Here is my mockup:
I don't like the way it looks with two different update ...
- 1,136
1
vote
2
answers
264
views
Compact search bar design on top navigation bar for multiple pages?
Consider a website that categorizes its data into about three classes. For example, a website contains food information only for fruits, vegetables, and meat products. I have designed a search bar on ...
- 111
1
vote
2
answers
133
views
Where to add email/help button main screen of mobile app?
I'm working on a mobile app, for iphone and android, where the user can search for an item, and a list will be displayed with the stores where this item is sold. The "Map" button displays ...
- 177
0
votes
2
answers
114
views
How to use up more screen real estate in this onboarding flow?
I have this onboarding screen which is supposed to guide you through the creation of a dictionary term (define the term, add pronunciations, add recordings, etc., finish).
The design is not fully ...
- 391
0
votes
1
answer
65
views
Mobile tree structure with 2 tappable areas
I am designing a tree structure displaying the course content for mobile.
Each row has 2 tappable areas:
caret for the unfolding
text area for detail content page.
In the usability tests, most users ...
- 343
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/...
- 1,136
1
vote
1
answer
264
views
Arrow indicating alphabetical sort points down but arrow indicating price ascending arrow points up
I've recently run into a dilemma while searching for icon ideas for sorting UI elements. The issue is that the icons for sorting items in ascending order by price and ascending by name (alphabetical ...
- 13
1
vote
1
answer
236
views
Do non tech folks know the difference between search and keyword filter?
I have an app (direct to consumer) with search and advanced filters. But in some parts, it loads a list and has the filter by keyword functionality, so the user doesn't need to scroll. I wonder if I ...
- 853
0
votes
1
answer
71
views
Is a series of GO buttons, at each step of iphone user interaction, easier for user to understand than different title each button?
Anyone see any problem with a series of GO buttons for each step of a mobile diagnostic app?
That is, when user starts iPhone app, user sees titling, a couple of optional config controls,
and a big ...
- 101
2
votes
0
answers
215
views
Is there a better pattern for 'nested' UI select controls [Users can use THEESE or THIS] [closed]
Is there a good UI pattern for this sort of specific select case?
There is a search field for labels/tags. The user has 3 options they can select from to refine their search. These options are grouped ...
- 21
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 ...
0
votes
3
answers
179
views
How should I design a text field that doubles as text view in a form?
Suppose you have a list of data that also doubles as an editable form like this:
The problem with this is that I cannot show any obtrusive indicator (like text field border) to give the user a visual ...
- 739
0
votes
1
answer
84
views
Can there be 3CTAs at one place with equal weightage?
On the checkout screen there are 3 CTAs,
simple checkout
Payment with debit card
Buy now pay later
All three with equal weightage of primary CTA.
Is it the right way?
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 ...
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 ...
- 81
22
votes
4
answers
4k
views
Why is Figma/Adobe XD needed?
A bit about myself - I'm an 18 year old amateur graphic designer who works primarily in Photoshop and Illustrator. I've also been trying to learn coding for the last couple of years. I have developed ...
- 221
0
votes
1
answer
616
views
Form Button Order (Save/Back/Next)
Here's the function of the buttons:
Save - gives the user an option to save and resume the task on the next visit
Back - cancel or return the previous form
Next - proceed to the next form
What would ...
- 41
0
votes
2
answers
54
views
What's the best way or practice to align the 3 lines at the bottom like the 3 ones at the top
I have too long text that I don't want to shorten or get rid of and it gets returned to the next line (Avis des tous les clients d'Abricibuis.www.Abricibuis.com)
What's the best practice to align the ...
0
votes
1
answer
1k
views
Accordion vs collapsable section
Is there any difference in accordions vs collapsable sections? Can we say that accordions have data, and collapsable sections have a layout? But, how do we visually differentiate between them? The ...
- 51
0
votes
1
answer
61
views
Show relevant information as UI text correctly
I'm making a webapp meant to be used by schools, in which teachers can create quizzes and assess students' answers. I'm finding myself struggling to get across the domain logic on grading, which is ...
- 63
0
votes
5
answers
989
views
Displaying a date range with labels, what is the best practice?
So I have a date range, for example:
21-05-2022 - 27-05-2022
Bear in mind that the date is in dd-mm-yyyy format. So my user wanted to add the "Start Date" and "Due date" before ...
0
votes
2
answers
85
views
Mixing true/false and open-ended settings
I've been handed a settings page to review. The settings mix true/false and open-ended items. Some of the open-ended items can be long and wordy. This is an example of the current design:
Mixing the ...
- 12k
0
votes
1
answer
191
views
Material Design Best Practice: Should a dialog "Accept" button only get enabled upon changes to a mutable inner state
As far as UX goes, particularly when working within the material design specifications for a Windows app, if an accept/cancel dialog is presented to the user that is intended to mutate some "...
- 101
64
votes
2
answers
8k
views
Why does apple hide things in menus?
On a number of occasions, I've needed to change something in the settings of my mac, and I cannot see it in the relevant menu. After some googling, in emerges that the reason I cannot see this option ...
- 679
0
votes
1
answer
165
views
Why use borders around dropdowns in a mobile app?
I'm working on a mobile app with a GUI similar to the Gasbuddy mobile app.
The first screenshot is what Gasbuddy looks like now. The 2nd screenshot is the same thing but without the borders around the ...
- 177
1
vote
1
answer
56
views
Position/order for "Low", "Medium", "High" options
Is there any convention about positions/order to display options buttons/radio- buttons/checkboxes for values as:
"Very low","Low", "Medium", "High", "Very ...
- 299