What should you consider when prioritizing information and features across screens on a product?

Question

Based on solutions and ideas from "Can you make it more prominent?" stakeholder phenomenon I decided to list out and prioritize each of the features on each screen in the product.

Turned out it's not so simple, some screens would have much as 50 information blocks or features (also some features can be ranked at the same level). After each of these have been prioritized, how would we use design to convey this priority in a single screen?

Things I'm considering right now

• typography size and style
• colors
• isolation and grouping
• flow of user actions
• placement (this is the least that is flexible without a major redesign)

What other design elements could be used and how would you use them?

We are also looking how features that span across in the funnel will be more important in some screens than others.

How should we get about using the takeaways from feature prioritization to reflect on improvement on the UI design of product?

Answer 1

Just a bag of ideas, not attempting canonical answer:

• make it easy to scan instead of read so a user can easily exclude irrelevant options, e.g.

  • logo on top left can be large, fancy and prominent and no one cares even if their priority is not going to home screen
  • a restaurant menu has 5 pages and you want to make it easier for vegetarians => you can add (V) labels without changing order or reducing the number of choices for other customers
  • when I don't care about a stack overflow question, I scroll directly to the answers - this is easy to do even if the question is long, there are some colorful links on the right and 2 lines of menu on the top... yet, if the question is a duplicate, I notice the question does not "look as usual" and I go to the better question instead of scrolling down

• high/mid/low priorities are enough, no sense in ranking 50 features with higher precision if the stakeholder opinions are not so finely tuned and/or change in time

  • if you change a page too often, users won't be able to get familiar with it (see previous point about fast exclusion of irrelevant options)
  • if it's not important in the first place, than it's not important whether it's 48- or 49-not-important

• search

  • good url+title of sub-pages will make it easier to visit the correct page for the first time (the default browser address bar action is to search) as well as the next time (using browser address bar autosuggested links)
  • though if it's easier to google "yoursite somefeature" than to find it on homepage or at least search from homepage, something might be wrong (e.g. I gave up finding stuff on Amazon long time ago, or make sense of Facebook menu which is faster to google than to navigate)
  • there is always more than 1 way to name a feature and users tend to be very inventive, so search term monitoring and manual crafting of results can provide huge improvements

• do not look like an ad

  • not proud of my "why are they so stupid" feeling for people who don't use uBlock Origin, but they tend to become immune from noticing elements that look like ads, so if something looks like the most prominent feature to you might go unnoticed by most users
  • also most prominent (with bright colors and animation) might be annoying if looking for something else, so I would say that easy to find is good, easy to ignore is also important

• feature of the day

  • if you are afraid that some features might be useful to users but not easy to discover, you can make 1 "random" feature prominent and over time users will notice something useful to them that they were not looking for
  • this will most likely look like an ad (since it IS an ad), but ¯\_(ツ)_/¯
  • carousel is popular for this purpose

Answer 2

This is a huge subject to be answered here, the internet is full of articles related to visual hierarchy and its application in UI Design.

Here is the one i find good - https://www.awwwards.com/understanding-web-ui-visual-hierarchy.html

Also a design element missing from your list is Animation, this is a unique feature for digital medium and it can be used in many ways to create hierarchy and communicate other information (micro-interactions).

And some features being more or less important according to screens is natural, still try to maintain consistency with the elements as thats more important than hierarchy, as its all about the user completing the funnel.

For improvement on the UI, test your designs as frequent as you can, and use analytics and heatmaps to understand whats working and whats not working, keep iterating.