29

I have the below screen that shows a list of items. The list can sometimes be long and sometimes short. When the list is long, the UI looks okay, but when it is short, the screen looks a little boring. Is there any suggestion to improve the display in this scenario?

Display of two phone mockups; one has only two items, the other has many

Context:

  • This is an app for a IOT device.
  • This screen comes in the middle of the user guide/on-board screens.
Improve this question
12
  • 45
    White space is your friend. No need to add things just to make it busy.
    – Mike Mark
    Jan 18, 2021 at 22:11
  • 10
    I’m actually more concerned with the “high content” case. How do you make explicit to a user that they can scroll (or generally, view more), if there is more than one page with connections?
    – Boldewyn
    Jan 19, 2021 at 8:06
  • 3
    @Boldewyn, True. I was considering putting a scroll bar to the right side, but when I gave this screen to my dad (60+ years old), he scrolled it to find the missing WiFi. So I came to the conclusion that humans nowadays have adopted to scroll if the content is missing from the list.
    – Charitha Goonewardena
    Jan 19, 2021 at 11:04
  • 6
    As well as the "low content" and "high content" cases, don't forget to properly handle the "no content" case where there are no wifi hotspots detected at all (what does user do next now?), or indeed the "plenty of content, but can't find MY router" case (is that because the user doesn't know the name of their router, or because it's off/not broadcasting SSID, or something else? Is there a button they need to press on their router when connecting a new device? etc.)
    – Steve
    Jan 19, 2021 at 13:40
  • 24
    Just fill the space with hot singles looking to meet me in my area like any other sane developer.
    – MonkeyZeus
    Jan 19, 2021 at 13:48

3 Answers 3

Reset to default
89

The first screen isn't "boring," it's "focused."

A user will be task-driven and goal-oriented during this setup process. Rather than looking to be entertained or stimulated (as with a news or social media application), they're trying to get a task completed. If the user happens to see fewer options during this step, it will actually help them complete their tasks easier.

Improve this answer
1
  • 3
    This answer put me in a different perspective. I will show my screen and @Danielillo suggested screens to an end-user. So I can get feedback from them as well. Thank you!
    – Charitha Goonewardena
    Jan 18, 2021 at 17:16
19

A footer after the final list item (with, say, the number of results) may help indicate that the user has seen all the possible results.

mockup with a list footer appended after the results.

(Please excuse my art skills)

Improve this answer
2
  • 1
    This is a very good idea! It helps the user know he is seeing all there is. Informative and to the point.
    – theGtknerd
    Jan 21, 2021 at 3:09
  • 1
    I don't like this - it seems redundant. What you should do, though, is put a throbber at the bottom if the device is still looking for more networks!
    – user253751
    Jan 22, 2021 at 18:06
15

Watermark

enter image description here

Individual framing

enter image description here

Total framing

enter image description here

Improve this answer
7
  • 16
    Would you be able to expand on how your suggestions improve the user's experience? These are just images.
    – maxathousand
    Jan 18, 2021 at 17:13
  • 4
    This is great. Thanks for sharing your ideas. I think having a total frame will fill the empty space and will give the user some idea saying you have a little list.
    – Charitha Goonewardena
    Jan 18, 2021 at 17:14
  • 26
    In my opinion, all of these make the experience worse. They just add superfluous visual noise and do not make the content any clearer.
    – Cody Gray - on strike
    Jan 19, 2021 at 20:57
  • 1
    @CodyGray OP wanted to know what could be used to fill out the remaining space, which is exactly what this answer focuses on. The watermark solution does seem a little ancient, but it's still a sensible answer to the question. I can imagine many situations where your minimalistic ideal simply doesn't work and results in a more confusing UX, especially if there are 0-2 items in a list and the user may expect more to appear. Large flat color spaces look ugly and it's something you see much more often in amateurish Android applications than modern professional software.
    – natiiix
    Jan 20, 2021 at 14:44
  • 5
    @natiiix Empty gray boxes could just as easily be perceived as a gap where content is supposed to be.
    – Radvylf Programs
    Jan 20, 2021 at 15:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.