After looking at my analytics, I couldn’t help but notice that the article on how to simplify a long, complex form was the most successful to date. It seems like this was a major problem many of you had. I want to write more articles like this that benefit you. What’s the biggest UI problem you’re facing that you need an urgent solution for?
Finding the articles here interesting and insightful, thanks! One UI situation I'm looking at is avoiding nested modals for a SAAS platform that has detailed processes within a single page. Would be great to hear any thoughts/techniques/best practice... you may have on this.
We ended up implementing an inline edit pattern to keep the user in the flow and not lose the context of the task, feels a better interaction than opening another modal. The project is under wraps atm so can't say much, but enjoy how you construct articles and would be awesome if you write one on this topic.
multiple types of navigation within a page; ie we have a site wide side navigation, then on the header of a member page's there is a dropdown to switch to different family members, and a button to take user out to external tool for editing the member, and 6 tabs with different member information
How to design an engaging web hero for a Saas product, that shows users the product without overwhelming them.
Currently users bounce from the page right at the top. We are experimenting with messaging...What visual elements might encourage them to scroll down and see more Info on the site?
I suspect your users aren't scrolling because you're cramming too much information above the fold. Keep the top of the page minimal with information but highly visual with imagery and a single headline. This will make users ask for more information by scrolling below the fold.
I really enjoyed the piece on the long form, and even more the one on complexe settings page.
On my side, I'm struggling to document/define basic patterns for apps, the "macro" flows that the team should follow : the CRUD actions (should an item's page be in edit mode or should we use a "display" page and click to edit, which I guess it depends on the type of Saas), what kind of overlay to use (especially modals / flyout / drawer in which case)...
Also struggling to structure a simple "display" item's page, using "description lists" in various styles, whether to start from grey or white background, limit the overuse of cards, structuring an "overview" section vs sub-items, this kind of thing.
Also how to optimize the structure of this kind of page on desktop, I feel like the the mobile first approach led to way too much space and simplistic structure... without making something too crowded of course.
Hope it's understandable, otherwise feel free to get in touch for more details.
About "description lists" I'm struggling to find a universal component name for that but I think that would be relevant ; I'm talking about the various ways to display an item's details/properties, instead of just having a text list of an item's property label & the corresponding value (eg. on the App Store, the carrousel displaying the rating, category... vs the more advanced details which are juste the label and the value >> in this case also, which rules to empathize on the label VS the value)
Finding the articles here interesting and insightful, thanks! One UI situation I'm looking at is avoiding nested modals for a SAAS platform that has detailed processes within a single page. Would be great to hear any thoughts/techniques/best practice... you may have on this.
Can you describe the detailed processes? What's the user task?
We ended up implementing an inline edit pattern to keep the user in the flow and not lose the context of the task, feels a better interaction than opening another modal. The project is under wraps atm so can't say much, but enjoy how you construct articles and would be awesome if you write one on this topic.
multiple types of navigation within a page; ie we have a site wide side navigation, then on the header of a member page's there is a dropdown to switch to different family members, and a button to take user out to external tool for editing the member, and 6 tabs with different member information
How to design an engaging web hero for a Saas product, that shows users the product without overwhelming them.
Currently users bounce from the page right at the top. We are experimenting with messaging...What visual elements might encourage them to scroll down and see more Info on the site?
Homepage hero? Got it.
I suspect your users aren't scrolling because you're cramming too much information above the fold. Keep the top of the page minimal with information but highly visual with imagery and a single headline. This will make users ask for more information by scrolling below the fold.
For a Saas product marketing website**
I really enjoyed the piece on the long form, and even more the one on complexe settings page.
On my side, I'm struggling to document/define basic patterns for apps, the "macro" flows that the team should follow : the CRUD actions (should an item's page be in edit mode or should we use a "display" page and click to edit, which I guess it depends on the type of Saas), what kind of overlay to use (especially modals / flyout / drawer in which case)...
Also struggling to structure a simple "display" item's page, using "description lists" in various styles, whether to start from grey or white background, limit the overuse of cards, structuring an "overview" section vs sub-items, this kind of thing.
Also how to optimize the structure of this kind of page on desktop, I feel like the the mobile first approach led to way too much space and simplistic structure... without making something too crowded of course.
Hope it's understandable, otherwise feel free to get in touch for more details.
To summarize:
When to use Bulk edit vs Inline edit
When to use modal variants
Difference between overview page and subitem page
Is this correct?
Can you elaborate on the "description lists" styles?
Yes I think that's a correct summary :)
About "description lists" I'm struggling to find a universal component name for that but I think that would be relevant ; I'm talking about the various ways to display an item's details/properties, instead of just having a text list of an item's property label & the corresponding value (eg. on the App Store, the carrousel displaying the rating, category... vs the more advanced details which are juste the label and the value >> in this case also, which rules to empathize on the label VS the value)
Hope it helped clarify 😅
Thanks for clarifying. Here's an article I wrote about data rows that might help: https://uxmovement.substack.com/p/a-better-way-to-display-data-rows