{"feed":"Recent-Questions-User-Experience-Stack-Exchange","feedTitle":"User Experience Stack Exchange","feedLink":"/feed/Recent-Questions-User-Experience-Stack-Exchange","catTitle":"Design","catLink":"/cat/design"}


While a large portion of inspiration for this tax form came from Material Design, we have deviated largely from some of the core aspects of Material Design to cater for our own corporate design as well as to fit the amount of data in as little space as possible.


I am currently employed by a company that leads the South African market in CRM and Tax software.

Our software enables us to maintain the lead in our industry due to our development orientation towards functionality, sometimes at the cost of decent user experience/ user interface.

As part of our effort to innovate and provide the best user experience we can, we've started designing a new Income Tax Return form for our users.

I've included screenshots to demonstrate the difference between our government's tax form, our current tax form as well as the new design we are working on.

Government's Tax Form

Our current form

Our new design

This is a very new concept for us, as we have never concentrated on the user interface as much as now.

I have faced many challenges during this design period, especially when it comes to properly implementing a Material Design structure to the form. The form is huge, and material 'components', while well designed, require a lot of space.

Because of the way our government handles tax, we are subject to changes in the form...

I can't decide what option is best. What I know for good is that, in 'Section1', if I tap on 'All' next to the 'CHAPTERS' line, I get the full list of chapters in order to perform multiple choice and start my training.

My doubts are about what happens when I tap on a single chapter panel, where I am supposed to see the green/red bar in detail as well as the possibility to start my test/training getting questions only about the selected chapter.

Initially I was thinking to use the 3D touch, allowing the user to get a peek and pop of the selected chapter (after a long press on the chapter panel in 'Section1') as well as a chapter detail as shown in option 2 or option 3 (not sure if this is totally correct but that was the idea).

I quickly abandoned all that for a more classic action sheet (Option 1), when I get the bar details with numbers and progress + the possibility to start my test/training on selected chapter 1. I was wondering if it's better to provide a sort of landing instead of an action sheet (option 2) or the possibility to select a chapter and then scroll to see the details of all the other chapters and make my choice (Option 3).

Please note that there's no other place in the app where I can see the red/green bar with numbers on top of it. Please also note that having the curiosity to...

I am a UX designer for years and I came across a project lately that I would really love to know what would you do in this situation:

It’s a website that provide services for different age groups such as <6 , 6-12, 12-25 … They want ONE landing page that attracts ALL these age groups to then lead them through the other pages which specially designed for them. Since I always believe that the age matters a lot on the design, I would really appreciate if you would share your opinion about “how would YOU do this?”. How to add 4 different sections of different age groups in one page?

  • Better via Buttons?
  • Via image slider?
  • 4 rows?
  • 4 columns
  • or?

Thank you so much in advance. Best regards

As a user researcher I know how to conduct studies around usability, design, feelings, needs, pains and other topics regarding a specific product. What I am struggling with is transferring this knowledge/experience over to the brand perception of a company from a users perspective. How do I measure the brand perception and how do I compare the current brand design with a redesign (validated by users)? I thought about implicit reaction time tests as one methodology but couldn't find available tools with this background.

In there's a section called Multi-select breaks on pagination

Essentially, the idea is that if you can select multiple line items and you implement pagination, the selected items should be persisted.

Is that a good idea? If so, should the persistence be handled by the front-end code or the back-end code?

If the persistence is to be handled by the front-end code, does it mean that I need to load all the data upon first load? (I think that's suboptimal when the data > 10000 data rows or when the data is changed quite frequently)

Or i just need to simply store the selected items id in an array on the frontend?

Or every time an item is selected by a user, that piece of info is saved to the database?

There are pros and cons for each situation, so I hope to get some feedback on this.

I got existing IOT web based application which is related to database. It is very vast product and I can't try and test this product due to some confidential things. I need to do user research (I am new in user research) and find pain points. On basis of this I have to provide ideas of improvement.

How do I start in this condition? Please help. Thank you in advance!

I was stuck in this screen. 2 buttons and 2 tabs, how to display them ux?

I need to sync iPhone contacts with app. We can store only 1 phone number and the contacts may have 2 or more. On top of that these phones are not labeled properly so I cannot filter them "sync only mobile phone number". How do you handle this scenario? Do you sync all phone numbers and store them in app? Thank you and if this question has been answered before please point me in the right direction.

I understand my image sizing should be dictated by other factors but I was curious if there were any standards for image aspect ratios in responsive web design. i.e., 1:1 or 3:4 which reflects the standard 600px by 800px found in digital photography.

A lot of design systems/ style guides define red as the color for "delete"/ "erase"/ uninstall/ error buttons. In material design, I didn't find this specified.

So, what is the best practice?

I think the options are:

  • button with the primary color as background;
  • button with the secondary color as background;
  • button with the red as background;
  • link.

For a "Material design" project, I need to display a key-value list with multiple items, something like that (example with an animal and 4 criteria):

  • Name: Cat
  • Category: Mammal
  • Color: Black
  • Size: Small

I would like to see a clear distinction between the key and the value.

But I can't find anything in the specification that offers an idea for the key-value lists:

There are only lists that only display a sequence of values, or lists with a first black text followed by a second gray text (which specifies the previous text).

Do you have a good idea to post a clear and beautiful key-value list with Material Design please?


We have an energy dashboard in a STEM elementary school. One of the pages is a competition for the most efficient building which starts at 8:00 AM Monday and completes 2:45 Friday.

We are currently showing a race where the distance run by each building is calculated as described below. This allows all teams to start at a starting line at the beginning of the week/race, for the most efficient building to reach the finish line at the scheduled competition ending time, and for each building to be positioned based on its current efficiency.

(TimeElapsed/CompetitionDuration) * MIN( EnergyUse(i)/SqFt(i) ) * ( SqFt(i)/EnergyUse(i) )

This approach, however, is not very intuitive since the winner is the team with the lowest score (energy use per square foot). Additional, a typical race has a set distance to travel but not a set time to complete, which makes it even less intuitive. We also considered dictating each team's score based on their energy use against a baseline energy use, however, this can result in a team going backwards which might be difficult to understand.

How should a competition be presented where the winner is the team who uses the least energy?

I want to make an efficient design for version control in a web app. Let’s say the app is an editor that allows users to build visual content. And let’s say that I want users to be able to access “versions” of their content at any time in the future, even if they leave the app.

The way I’m currently holding the functionality is that saving the content and saving a version of the content are different. Perhaps a user just wants to save every 2 minutes to prevent losing their work... but I don’t want 15 different versions with only minor changes to be saved and displayed on the app.

How do I go about approaching this? Should there be a “save” and “save as” option?

Also, if the user is scrolling through the options and he/she wants to replace his/her current work with an older version, how would that interaction feel like? Should there be another button?

Maybe all the functionalities need to be put into an “actions” drop down? Not sure!

I have a requirement to design a portal that has large tables with select delete requirement and numerous columns. The client needs a responsive table that would scale based on the size of the screen. How do I handle this request? Do I use a Scrollable table with few fixed columns or a collapsible table grid? Appreciate any references and examples.

My team are working on a 'predict the scores of the games' promotion for our business.

We are debating how you enter the scores themselves, we have 2 solutions:

A. A button either side of the number to increase/decrease the number for the score. B. A standard text entry field to enter the number.

Which is the best route?

In a web application I wonder what's best practice to design an element (text link, button) pointing to an action where users don't have access to (e.g. create new user). Esepcially when this element is not the primary element of the page, but just like one link of many links.

I see the following possibilities:

  • Hide the corresponding element (link to create) - in thise case users could wonder where the action to create a new element can be found
  • Disable the corresponding element (link to create) - in this case the user could wonder why the element is disabled so an explanation would be needed
  • Show an error message
  • Show an error page - in this case the user would have to jump back

In a web application where the users edit records in a large database, and normally start off by looking at a list of 10-30 records, what are the best practices of marking records that were changed by this user over, say, last day or two?


I'm developing a mobile game that is played in portrait orientation. The player is at the top of the screen (unable to move vertically) and flying objects that either need to be picked up or dodged, move towards the player from the bottom.


Determining the size of the assets/sprites or how much the camera is zoomed in has been a struggle for me and I was wondering if there is maybe a good guideline to follow to avoid common mobile device mistakes like eye strain, touch screen precision, and analyzing whether the approaching object is to be collected or avoided? e.g. if a moving object is too small, the player won't have enough time come to a decision on what action to take.

This morning I was reading this

Then I thought for seconds my phone battery is down. But it was not the case. Well it is different from the red of battery saver. Many cannot figure it out. Is it good experience? As Android developer What we can do better?

There are a variety of ways to implement selecting everything or nothing in a list.

Is there any usability research comparing the different approaches?