Quick UX Prototyping With Adobe XD Shortcuts (PDF Cheat Sheet)
Every designer has their favorite prototyping tools. However, when it comes to UX wireframing and prototyping, there is often more than one tool involved. Sooner or later, you find yourself switching from one tool to another to cherry-pick …
Material Design app bar filtering best practices
I’m looking into material-design filtering patterns and came across this example. I have two concerns about it:
-
Not quite sure about the visual compatibility of the filter icon and the hamburger menu icon in the app bar.
-
If a filter is selected, should the app bar title (i.e. ‘Everything’) adapt to display the currently chosen filter? If so, wouldn’t that conflict with the functionality of the hamburger menu?
For example, say that there’s a section in the navigation drawer called ‘Timeline’. And within Timeline you have filters that can be applied (Filter 1, Filter 2, etc.). Navigating to Timeline and then choosing Filter 1 will change the app bar title to Filter 1. While in the Navigation Drawer, if opened, ‘Timeline’ will still be highlighted.
What do you guys think?
What tools for created a dynamic prototype for TV, with simulation remote control? [on hold]
I would like to know, what did you use as software for created a dynamic prototyping for TV.
I Know that possible with axure but it’s more long and complicated.
what did you use for that ?
A advice ?
Thank you !
…
What are the best and tested use cases for an Overlay [on hold]
Which are the scenarios that might be an overkill if we are using an overlay, and what should overlay contain and what not.
Need UX expert to fairly evaluate mobile app design
I appeal to UX/UI experts especially for mobile app design, who are working and practicing in this field every single day.
I’ve completed design for a daily task manager mobile app (for iphone) and would appreciate if you ca…
Challenging User Migration Problem
Our team has a challenging UX issue we are trying to solve neatly. We have rebuilt an existing system from scratch and there is a technical constraint that old users will need to re-register to the new system to access their …
Use Case Documents
I have a colleague who’s a UX person who is adamant that the Use Case document is unworkable. He wants to directly do it his way (the UX solution) without following the UCD, and insists that I do it that way too. He won’t bud…
What is the best way to show an item has been added to a list in iOS?
I have a list item in an iOS app that is ordered alphabetically.
When adding a new item to this list, there is no way to easily tell that this item has been appended – especially if your list is really long, you would hav…
Header on a table with grouped rows
I have a table that looks like this crude paint drawing
The table represents employees grouped by the company they belong to. I have a table header for the Company (name, address, city, state, etc.). How do I add a heade…
Is it okay to have several lines of summary information inside a tab label?
I’m designing a complex form interface for building custom reports. The user can specify a lot of different kinds of information — far more than will comfortably fit on screen. We will have approximately five separate screens of controls.
We’re going with a tab-based layout, where each of the ~five screens is a separate tab. We find that the fields divide naturally into simple categories that our users will understand. The tab navigation and form controls (submit, cancel, revert, etc) will be fixed.
When creating a new report, the user will probably fill out the screens in a certain known order, although they don’t necessarily have to. When editing an existing report, they may make changes in any order. A user may need to edit an existing report that they haven’t seen or used in months, or at all.
The state of the form may be very complex, and it is subject to interdependent validation rules — selecting one option may change validation rules for another option on a different screen. This is a consequence of the back-end system, which in turn is designed to follow complex business rules. It is even possible that rarely, changes in business rules or the underlying data could cause a report that was once valid to become invalid (requiring editing by a human).
Because of these factors I feel that it is very important to have some sort of summary view so that the user can see the complete state of the form.
Early prototypes of the form put the tab navigation on the side of the tab content. Each tab label had the name of the tab and a one-line summary of that tab’s state. The downsides of this approach quickly became apparent. Most tabs required more summary information, so the tab labels became large, variable-sized, and full of information other than the name of the tab. Some information needed to compute the summary loaded late, so the tab labels moved around. It’s also possible that the tab labels could overflow the available space, resulting in a vertical scrollbar for the primary tab navigation.
My preferred approach would be to have the tab navigation above the tab content (with no summary information), and have a separate summary panel on the side. The panel could include as much information as needed without trying to double as navigation, including verbose validation messages (“Because you chose option X, you must make a selection for Y.”). The error messages could even by “hyperlinked” to reveal and highlight specific fields.
However, some managers saw the first one and liked it, so it looks like we may be stuck with it. I’m trying to figure out how to salvage the summary information within those constraints. I definitely feel that I shouldn’t put any interactive elements inside the tab labels, because that would conflict confusingly with the navigation function. I’m also leery of putting in colorful text or icons, because I don’t want to drown out the tab name. The same goes for stuffing the summary text itself in the labels; full summary information might distract from the navigation and could even push the last labels off the visible area. On the other hand, partial summary information could be confusing, because a user might not understand that some important fields on another tab are excluded.
How can I salvage this? Is it okay to just stuff a bunch of summary text in between the navigation labels? If not, is there some reasonable limit? Am I overreacting by keeping other interactive content out of the navigation labels? And is there some other solution I’m missing?