Questions tagged [human-interface-guideline]
Human Interface Guidelines (or short: HIG) refer to a written documentation that line out common elements for a user interface. These guidelines help develop a consistent interface and user experience across a team.
229
questions
0
votes
0
answers
25
views
Improving Apple 2FA modal prevent blocking input form [closed]
Expressing concern over Apple's 2FA user experience, I find it cumbersome each time I log in. The 2FA verification modal frequently obstructs the code input field on my laptop, the device I use most ...
0
votes
3
answers
163
views
Should toggle buttons be same size or dependent on text size?
I have multiple toggle buttons each with around 3-5 values. The problem lies in the text, where some buttons are much longer than others. Is it better practice to make all buttons the same size ...
0
votes
0
answers
40
views
Can we place Information icon inside a Chip or Tag element? [duplicate]
I am working on a popup screen. In this situation, the user attempts to publish a job on a certain job board, for example, Linkedin. The popup will open, and in order to publish a job, we must input a ...
1
vote
1
answer
30
views
A webpage with just an audio player
Suppose I have a small handheld device with just a micro-controller, a keypad and a speaker. There are some pre-programmed sentences stored in the micro-controller, which can be selected by typing a ...
4
votes
1
answer
110
views
Adding a copy link in the email to copy the verification code
As part of sign up, I want the user to verify their email by copying the verification code from the email that has been sent to their personal email address, and then entering the code in the input ...
1
vote
1
answer
210
views
What are the specific breakpoint sizes that Apple uses and references in their design guidelines? [duplicate]
Does someone know, What are the specific dimensions (primarily width) of the breakpoint sizes that Apple uses and references in their design guidelines, name as the XS, SM.... XXL?
Reference: https://...
1
vote
1
answer
57
views
Side-bar Navigation pattern
I recently discovered a new UI pattern for the hamburger menu, displayed in the centre of a sidebar, even for e-commerce sites, but I can't find any resources/inspirations or examples. I'm wondering ...
0
votes
2
answers
86
views
how to make card with more detail [closed]
How can I display all the information on this blood donation request card without cluttering the card's visibility on Stack UX? Additionally, I have a long text that describes the user's blood need, ...
3
votes
2
answers
1k
views
How to differentiate different states of input field
I have three states of the text field in my design. One is the normal input field, one is when they have input the no. and the next state is when the number is locked as in users cannot change the ...
0
votes
1
answer
231
views
Minimum touch target for apps
It is stated in human interface guidelines and material design that the touch target should be 44x44 & 48x48 respectively. Many top apps don't follow; isn't this an accessibility issue?
3
votes
1
answer
371
views
Can Toggles be used instead of Checkboxes?
I have seen multiple applications going for safe usage of checkboxes while there is a multi-select scenario of options shown in list or under one category.
What is the rationale of having checkboxes ...
0
votes
2
answers
132
views
How to design dependent dropdown menus
I am designing a profile creation screen which allows the user to add a birthday (optional). If they add a birthday, there is an additional dependent dropdown that allows them to set a reminder for ...
2
votes
2
answers
2k
views
When should you use a snackbar element as opposed to put it on top of a form?
There's three ways of displaying error;
inline (field),
top of form (form),
and as a snackbar
When should you use a snackbar element to show an error as opposed to put it on top of a form modal or ...
-1
votes
1
answer
92
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
2
answers
50
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 ...
1
vote
2
answers
171
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 ...
1
vote
1
answer
394
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/...
0
votes
1
answer
95
views
How to make sure the user knows interactivity of this widget
I want to keep the interface as clean as possible, but I want the user to know, that they can edit the exercise (eg. the list tiles with the not-so-dark background), where I then display the exercise ...
0
votes
1
answer
101
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?
0
votes
1
answer
71
views
UI for multiclass classification taxonomies and search results
I am confused about how to present multiclass classification taxonomies to the end user on a consumer app. If an item or even an entire subcategory can be classified under different parent categories, ...
0
votes
1
answer
2k
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 ...
0
votes
4
answers
123
views
Hiding or showing upcoming functionalities
We are developing a data-heavy site and I was wondering, how should we present (or hide) upcoming functionalities. Let's say in a form an option which will only be available later. Or a button that ...
2
votes
2
answers
84
views
Does it make sense to use a platform-agnostic HIG for desktop applcations?
I'm developing a stand-alone, cross-platform desktop app for Windows, Mac, and GNU/Linux. I've read these ([1], [2]) questions and concluded that I'll have to cherry pick guidelines from all three ...
0
votes
0
answers
18
views
What are the guidelines for showing many columns in an ipad app? [duplicate]
I'm creating an app for an ipad where it should show a table with someinformation, more than 7 columns. I looked in to Human Interface Guidelines for tables but there is only information for tables ...
0
votes
2
answers
720
views
What is this mobile bottom sheet UI element called?
I want to communicate the implementation of this kind of bottom sheet to developers, specifically how it's a tall bottom sheet, but you can still see the background minimized underneath. What is this ...
3
votes
1
answer
455
views
When to use split button vs more options button?
When do you typically use split buttons vs a button with more options (ellipsis)?
From how I understand it, split buttons are for grouping related options with one most common option surfaced?
1
vote
1
answer
52
views
Standard Container Size For Mobile Canvas? [closed]
I am creating a mobile design in Figma and my selected frame size is 428 x 926 px (for I phone 13 pro max). I want a container to achieve a proper grid system, can you please tell me what should be ...
0
votes
1
answer
477
views
Question about Grids and Layouts in UI Design
grids and layouts are something that i've struggled with since starting my design career two years back. I've read books like grid systems and watched several videos and courses but as a UI designer, ...
0
votes
1
answer
153
views
Can we have two type of alerts in an application?
In my application, I have two types of information in the content
1.Critical Alerts
2. Alerts that require user attention - may be or may not be critical, totally depending on the need.
I planned to ...
1
vote
1
answer
146
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"...
2
votes
2
answers
200
views
Guidelines for GIS and map based interface design
Map based applications are becoming a part of our daily life, from using Google Maps to find locations to booking a Uber. However, there doesn't appear to be a set of standards and guidelines when it ...
1
vote
1
answer
145
views
Why does Apple use this guideline "A label is often unnecessary when placeholder text is present"
In which context does Apple use this guideline, and why did they do so? I can only see the logic in the context of having an input field where you search. It just seems a bit odd since it has so many ...
7
votes
4
answers
1k
views
Why does Airbnb put the close button for a dialog on the top left corner?
It seems this pattern is quite common in mobile apps, but not so common on the web.
(Assuming that most people use their right hand to control the mouse)
1
vote
1
answer
55
views
Is it effective to test color palettes and changes on old monitors?
Does anyone here test color palettes or changes on older monitors? Someone in one of our design review meetings suggested doing this, and curious as to the thoughts of fellow UX designers.
In making ...
0
votes
1
answer
433
views
What are real examples of content-driven navigation?
Reading Apple HIG Guideline I came across an explanation of the content-driven navigation. It says that games, books, and other immersive apps use this navigation type. But what other immersive apps? ...
1
vote
2
answers
166
views
Need help with restaurant menu customization ui and ux
for the app that I'm working on, a restaurant owner/manager has the option to customize their menu. The flow is that:
The system suggests a list of items that can be served by a restaurant. This ...
2
votes
3
answers
948
views
Is it OK to let the user use colored tags to associate data sets or keywords?
I am debating with my boss regarding whether tags should be coloured or not. I feel that colouring tags will just work as fun for the user. A user won't remember what colour he has assigned to a ...
3
votes
1
answer
1k
views
Why there are 3 lines in all types of menu icons?
I have noticed that all types of menu icons are using three lines or dots.
From a UI/UX perspective, does it matter the number of lines/dots?
For example if someone decides to use only one or six ...
2
votes
1
answer
806
views
Expand/Collapse button directions in tree table ie data grid versus non-table applications
I'm creating a tree table for use on our platform. We currently use chevrons for our expand/collapse buttons, and in doing a lot of research across UX forumns, I decided on the rule that the chevron ...
1
vote
2
answers
1k
views
Is there a name for circles that show progress through form?
Interfaces that guide users through several steps with one per screen per step often have little circles at the bottom of the page, with each circle representing a step/screen in the sequence. The ...
2
votes
1
answer
4k
views
Is there a Material 'Chips' UI component in the IOS HIG?
If so, is there a resource somewhere I can grab it or some documentation on it? Basically just want to have a list of tags that a user can delete. If the HIG has something i'd prefer to use that.
3
votes
2
answers
270
views
Should long paragraphs be aligned justified or just left aligned? [duplicate]
For better readability which would be better for long paragraphs: align-justified or aligned-left?
Reason for asking: Aligned justify gives a better visual appeal but many tutorial and learning sites ...
4
votes
4
answers
632
views
Does it make sense to have differently shaped buttons together?
Generally, buttons shown together are also visually similar.
Are there situations where it might make sense to show together buttons of different shapes? E.g. a rounded rectangle button together ...
3
votes
3
answers
323
views
Are there services out there that allow you to easily upgrade or downgrade?
I noticed that in many different types of products and services that offer a few different subscription plans, upgrading is easy. Downgrading, on the other hand, is a bit discreet. In most of them, ...
1
vote
1
answer
311
views
What are the most recommended colors for the UI of a mobile app that is used under sunlight? [duplicate]
To use the app, users have to increase the brightness of the screen and this causes the battery to run out faster and still the best experience is not perceived.
It is an app that users use daily for ...
2
votes
1
answer
1k
views
When to use Apples 'SF Rounded' font?
Apple uses in certain cases 'SF Rounded' for big titles and number values (e.g. Apple Pay Transaction Detail), in many other cases they still use the regular SF font (e.g. calculator, timer app).
Is ...
0
votes
2
answers
2k
views
Avoid toggle switch on any page with save button?
I'm currently working on a tool which more or less requires a submit/save button on every page. This is due to avoid any immediate effect on the end user who consumes the content.
Sometimes, it feels ...
2
votes
4
answers
203
views
What usability issues occur with an application form only showing one question at a time?
My client is thinking about having an application form, with approximately 25 questions. The type of questions will be personal information such as name, date of birth, address, as well as financial ...
0
votes
1
answer
2k
views
Which facebook design should you use for facebook login?
Recently facebook changed its products design and changed to a new logo. According to their brand resource center you should use their new logo and color. But their facebook for developers still uses ...
2
votes
1
answer
2k
views
Close icon to left or right on mobile Material Design [closed]
I have observed that Material Design puts the close icon to the left in all the examples of Material Design. Do you know any case that it goes to the right?