0

I have this onboarding screen which is supposed to guide you through the creation of a dictionary term (define the term, add pronunciations, add recordings, etc., finish).

enter image description here

The design is not fully complete or styled right, still playing with it. On the right is supposed to be some hints as you focus in on the input fields. On the left though, is the steps you can go through, to give you a sense of how far you are. Obviously this wouldn't work on mobile (the steps I would probably hide on mobile), so that is the first con. The second con is that all that space below the left steps is wasted, I would like to make better use of screen real estate.

Anything you can imagine that can be done to improve the use of the screen real estate? And also potentially some hints to make this also work on mobile. I like the hints on the right, even though that can't really be done on mobile though, so I would probably just hide that on mobile, but not sure yet if it can be made more mobile friendly. The main thing is though, how to not waste the space on the left, since there's only a few steps likely to be listed, and there's all that useless whitespace below them now.

6
  • How extensive can be a term to occupy more than half the width of the screen?
    – Danielillo
    Jun 26, 2022 at 21:11
  • What is your point?
    – Lance
    Jun 26, 2022 at 21:39
  • In the example screenshot, there's a field to type the "term" and it occupies half the width of the window. Taking as reference the word "term" that is above and has only four characters, the space to fill can have more than seventy characters, is that a term?
    – Danielillo
    Jun 26, 2022 at 21:45
  • Yes, terms can be 100 characters, or longer even. In English terms are short, but in Inuktitut they are long.
    – Lance
    Jun 26, 2022 at 22:29
  • Important information to include in the question as it greatly conditions the possible answer. On a screen of a "traditional" language, the proportion would be exactly inverse, the green space as a field to be filled in and the gray for suggestions, what would be the immediate answer.
    – Danielillo
    Jun 26, 2022 at 22:37

2 Answers 2

1

Indeed, it is not necessary to "fill the real estate" It is probably more productive and useful to focus on the task at hand than to add content just to fill space. Think of Google: just an input field and a logo. That's all it needs, so why add more noise?

However, you can add more content. For example, take the Google Chrome splash page as an example. You can mimic this by using only one form and then displaying the most recently searched terms, or the navigation on the left, or both (navigation on top, searched terms on the bottom). This way you get a clean and focused interface that works on any device without any extra effort.

enter image description here

1

@lance you can avoid left-menu and instead try using the step by step wizard approach, it can work well in both Desktop and Mobile. The right info pane can also be avoided by displaying it on mouse-hover of some icon. That way you will have the entire screen space to complete and focus on the main task. I hope this works well for your problem statement. Thanks!

Your Answer

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

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