0

When I think of a design, I think in terms of blocks, i.e. fixed size/proportion elements that can be arranged in multiple ways.

The subject of this particular discussion is the banner size in the following two design variations:

Banner size consistent with design.

Banner size adjusted.

The first one is using height of 84px, which is the same size as of the most components in the app design (better observable in the mobile version).

The second variation uses size 64px – a static size that does not exist elsewhere in the design.

The latter (in the the words of a UI designer) looks more balanced. From the UX perspective, the latter is better because it increases the size of the visible content upon loading the page.

My concern is that a guiding principle in the UX is consistency.

What arguments must be considered when considering between element size consistency at a cost of wasted space over stylistic balance?

  • I like the reference to a previous question about the "Call to Action" text here, Gajus. Good job. – Swapnil Borkar Sep 21 '15 at 14:58
  • Your second variation does look better, but I think it's also due to the View Trailer text is around the same size? – Swapnil Borkar Sep 21 '15 at 15:04
  • I find it really odd that second variation (smaller banner) is performing better (here is a preference test using real users, usabilityhub.com/tests/905b6e1cec9b/results/8c6645f90e95). My view is that: large banner containing a CTA is a good method of instructing user what to do. Its large, catching eye: user is given instructions ("Book ticket ...") as well as options for alternative actions ("View trailer"). As opposed to, when banner is adjusted to blend with the rest of the design, it loses its importance. – Gajus Sep 21 '15 at 15:12
  • Have you tested using a font which isn't condensed? – Swapnil Borkar Sep 21 '15 at 15:28
  • @SwapnilBorkar We do not have voice over the font we are using. It is given to us as part of the brand and it is part of our service offer that we will use it. I think it is really bad idea... custom fonts should not be used in the app (for matching the brand). Unfortunately, our clients think otherwise and it puts us in disadvantage with the competitors if we do not offer that. – Gajus Sep 21 '15 at 15:37
2

Stop waving the flag of consistency

(This is not a plea to you, Gajus, but to everyone reading this answer).

I have been writing quite a bit on consistency and its gross misunderstanding and misuse; so rather than repeating myself, see, for example: This, this and this answers.

To your question - there is little in these designs to speak of consistency if one considers consistency in UX as a means to reduce cognitive load.

Sure, you can speak about a grid's row or column dimensions as something that should be consistent, but both in the graphic-design and grid-design worlds - breaking from the norm could have a well desirable effect.

Your top-bar is already distinguished by its black background. So its height should be fully determined by stylistic/practical considerations, not ones dealing with consistency.

Option II

So in terms of screen-real-estate, the shorter bar (option 2) is better. Personally, I find that same option also more stylistically appealing.

What's more, I believe that in terms of user tasks, they'll be interested much more in the main content area than the bar, so having it smaller also seems beneficial.

0

What makes the first look so different from the latter is the difference in whitespace (in this case, blackspace, really =P ) compared to the whitespace of other elements. The first one has text margins larger than anywhere else in the interface.

However, even the second one has fluctuating spacing: enter image description here

Those are some of the top margins of other elements, and the side margin of the "change location" box. None are the same as your title margin. Not to mention the huge gap on the righthand side of the time table.

I think the problem lies with being focused on the total box size as a form of consistency. And in the one you're asking us about (not the mobile one) only one other box is 84px tall. So I'd say either keep it ALL the same size, like mobile, or focus on a different kind of consistency.

I'd go back and make sure at least the top and bottom margins of elements are the same. (sides are trickier, especially centered boxes like the yellow times) Personally I would work more with ratios between text and margins to keep all those within the same grid, use fonts that are 100%, 200%, and perhaps 150%. Trying to line stuff up by thinking in "blocks" (say, 16 pixels) is much easier on the brain than thinking in individual pixels.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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