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.

Filter by
Sorted by
Tagged with
2 votes
1 answer
30 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 ...
user avatar
0 votes
2 answers
22 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 ...
user avatar
1 vote
2 answers
41 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 ...
user avatar
  • 173
0 votes
0 answers
15 views

Best way to seamlessly login and/or create a user account with Facebook on a website?

Wondering how to implement the UX for login in this day and age, if I only allow creating an account / logging in with 3rd party services (such as only allowing Facebook or LinkedIn login, just those ...
user avatar
  • 335
0 votes
2 answers
80 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 ...
user avatar
  • 335
0 votes
1 answer
29 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 ...
user avatar
1 vote
1 answer
49 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/...
user avatar
0 votes
1 answer
65 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 ...
user avatar
  • 3
1 vote
1 answer
100 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 ...
user avatar
0 votes
0 answers
21 views

dynamically displaying pairs of text inputs

I am working on a form whereby I need the user to fill out at least one combination of a textbox and a textarea. I want to give a clue about the possible options of the values of the first textbox ...
user avatar
  • 255
0 votes
0 answers
20 views

ButtonToggleGroup disabled state styling

Im using slightly themed angular material components and this question is about restyling mat-button-toggle-group component. Toggle group is a row (or column) of buttons that may be: mutually ...
user avatar
  • 101
0 votes
1 answer
63 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 ...
user avatar
  • 101
1 vote
0 answers
35 views

Is there a better pattern for 'nested' UI select controls [Users can use THEESE or THIS]

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 ...
user avatar
0 votes
1 answer
38 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 ...
user avatar
0 votes
3 answers
88 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 ...
user avatar
0 votes
1 answer
36 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?
user avatar
2 votes
1 answer
114 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 ...
user avatar
0 votes
1 answer
93 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 ...
user avatar
21 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 ...
user avatar
  • 211
0 votes
1 answer
47 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 ...
user avatar
0 votes
2 answers
48 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 ...
user avatar
0 votes
1 answer
43 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 ...
user avatar
0 votes
1 answer
47 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 ...
user avatar
0 votes
5 answers
167 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 ...
user avatar
0 votes
0 answers
23 views

Functional but ugly UI. What value does a good looking UI add? [duplicate]

We keep talking about how a product needs to be functional more than looking good. But what impact does an ugly UI have on it's users if the product works really well? How or when should you convince ...
user avatar
  • 2,818
0 votes
2 answers
75 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 ...
user avatar
  • 8,969
0 votes
0 answers
34 views

Does Apple use a base grid for iOS elements?

I am currently working on creating an iOS and Android app for my company and was looking at the Sketch library that Apple provides for iOS. While inspecting a few elements it looks like some of the ...
user avatar
0 votes
1 answer
44 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 "...
user avatar
  • 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 ...
user avatar
0 votes
1 answer
119 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 ...
user avatar
  • 173
1 vote
1 answer
41 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 ...
user avatar
2 votes
2 answers
120 views

How to avoid the use of nested cards

I am developing a school web app and trying to follow material design guidelines. There's a functionality that allows teacher to create homework and in-class test models, wherein they can input a list ...
user avatar
25 votes
4 answers
6k views

When and why should we choose rounded corners over smooth corners?

Smooth corners are gaining more and more attention recently in UI design. As a designer of iOS mobile apps, I recently tend to design only with smooth corners as it just makes the look and experience ...
user avatar
  • 353
0 votes
1 answer
74 views

What is a good UI to enter a list of numbers?

I'm working on a small UI to manage a few attributes to style lines in SVG sketches. One of them is stroke-dasharray. stroke-dasharray defines the pattern of dashes and gaps used to paint a dashed ...
user avatar
  • 101
0 votes
0 answers
20 views

UI Kit nonexistent in Figma what should I do?

Currently encountering an issue since my team decided to use coreui for development and I'm not sure what should I do in this case since there is on this UI Kit already made in Figma. Did you have any ...
user avatar
0 votes
2 answers
90 views

Usability of Purchase Experience

This is a product card within a carousel, showing a past purchases and aims to encourage a repurchase. My question is, does the interaction at the bottom of the card get missed? Do you understand what ...
user avatar
0 votes
0 answers
40 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) ...
user avatar
0 votes
1 answer
68 views

Creating a form with multiple posibilities

I'm relatively new here so please forgive me if this question is to open ended. I am working on a form for the user to enter an event. The catch however, is that there are 4 ways of entering the dates ...
user avatar
  • 113
1 vote
2 answers
208 views

How to design a UI to reduce eye fatigue?

I am an operator for a large piece of industrial equipment that has a new digital interface, but operating that equipment requires staring at a computer screen for several hours to ensure that ...
user avatar
0 votes
2 answers
135 views

How to distinguish between a selected and important menu item?

If you wanted a user to distinguish if a menu item is important and not selected. How will you represent the difference between the selected and the important menu item? The only idea I would come up ...
user avatar
  • 113
0 votes
3 answers
92 views

What would be a good UI element to give user ability to enter arbitrary text, or one of several special values?

Specific example is that we have a form which allows searching of issue tickets. One of the fields we want to allow search on is the assignee, currently this is a simple textbox. We also want to give ...
user avatar
  • 101
0 votes
1 answer
60 views

Applications with different gradient backgrounds

I am currently designing a new range of applications for a customer in HR. The goal is to provide all different core applications like planning, contracting,... as a separate software as a service ...
user avatar
2 votes
2 answers
153 views

Icons for indication vs. icons for action

I'm working on some tables that use both non-clickable indication icons (the R and the Repeat icons on the left) and clickable action icons (the dollar sign and printer icons on the right). I think ...
user avatar
  • 8,969
1 vote
1 answer
69 views

How do I make a split input that is regex friendly?

I have a web application that requires the user to enter text that is used to split another string. While I want it to be regex-friendly, I don't want it to confuse new users. For example, if the user ...
user avatar
  • 111
1 vote
2 answers
182 views

User Experience (UX) - latest patterns to represent one-to-many relationship

I have a requirement where there will be a Item - with details like Name and Owner Each Item can have 0 - 50 locations in different statuses. User should be able to add a location for an item. User ...
user avatar
  • 11
0 votes
1 answer
90 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....
user avatar
0 votes
1 answer
87 views

Date range and predefined values, tips for userfriendly and productivity

I need to add a date range to a filter. I would like fields being quick and userfriendly and I've thought in a combination of predefined ranges and manual input. I mean something like the image below....
user avatar
1 vote
3 answers
146 views

Useful UI themes that add value

I am trying to research content about UI themes that add value. Normally this is associated with vanity customization, but I find certain themes quite useful. A high contrast theme is valuable for ...
user avatar
0 votes
1 answer
47 views

Why in some Dribble UI's User Avatar (user settings) are kept in bottom left?

Just curious, I saw in some of the dribble shots are designed with the User Avatar in the bottom left of the screens and also noticed on BitBucket UI. Is there any usability factor for keeping it at ...
user avatar
0 votes
1 answer
81 views

Is it better/less confusing to show the user a longer list of options with some disabled, or only show the available choices?

This is regarding a signup/scheduling request form: In my business (appliance repairs), there are multiple manufacturers and products: Refrigerators Washers Dryers Microwaves Stoves We don't work on ...
user avatar

1
2 3 4 5
54