3

With a website I'm building, I'm wondering if I should combine the experiences between platforms together. For example, I'm wondering if I should keep this for both mobile and desktop. Here are some examples

Example Example 2

I'm mainly wondering about the header. Is it bad to keep a more mobile like design (meaning slide menus, e.t.c.) on desktop, or should I utilize more of the space that mobile would not have?

Improve this question

2 Answers 2

Reset to default
2

First off all, I appreciate that you seem to design your responsive web with a mobile-first approach (that's how I perceive it anyway).

As Imperative has already stated, consistency is generally a good thing. However, the mobile-sized interface might still be come through as consistent with the desktop-sized ditto even though they don't share the exact same navigation pattern. For instance branding elements, graphical profile, copy, artwork and information architecture might keep it together just fine. Especially important is that the IA is, at least, very similar for the users to find their way around the site. When the content is grouped and structured the same way, a user that is familiar with one of the platforms but new to the second will know what to look for and have a hunch of how too, which helps a lot.

The off-canvas drawer menu is (obviously) a solution that partially solves a common mobile interface problem: the deficit of real estate. But that's a problem that rarely applies when it comes to desktop interfaces. Consistency is valuable, but should you be consistent between your own interfaces, or with the standards for the respective platforms they're being used in?

Off-canvas drawer for mobile:

  • Access to all top level navigation items in one place
  • Robust in a sense that new items can be added in infinity (can be a curse too:)
  • Menu button is in a convenient position (even though it's usually in the "hard" corner)

Off-canvas for desktop:

  • I guess Fitt's law still applies, and the expedition up the north-western corner of the screen can actually be quite long. A drop in efficiency?
  • You don't always want to fill the entire width with content as the user can use a very wide screen on a PC, which can make the positioning of the menu and its button really awkward, and actually even hard to see.
  • A button in the corner can interfere with hot corners, or rather, the other way around.
  • An extra click, that could have been avoided, is added to reach a menu item.
  • The menu items are obscured until the user has visited the menu, when they could have been displayed directly.

Based on the arguments above, I would recommend a different pattern than the drawer menu for the desktop site.

Improve this answer
3
  • Once you crack 768 or 1024 CSS pixels, depending on your design, it's normally best practice to pull out the drawer anyhow. One of those things that's been drilled into my head again and again over the years is that if I make users wait for an interface or guess wildly at what to click, engagement gets slashed. Basically, I agree with you completely. I just wouldn't fold up the navigation on any device with enough real estate to expand it.
    – Imperative
    Commented May 15, 2014 at 21:01
  • Valid point there Imperative. There must be some kind of breakpoints that makes it work robustly, intuitively and without quirks and drops in efficiency, on each and every device you want to support.
    – Babossa
    Commented May 17, 2014 at 10:49
  • I'd think you could simply measure the width of your primary division, plus the width of the off canvas drawer, then expand the drawer by default if the document/window width (plus 32px for a scroll bar) is greater than your combined value.
    – Imperative
    Commented May 22, 2014 at 1:08
0

I think it's important that the user be able to recognize they are on the same site. So, from that point of view, yes you should keep your elements consistent.

Couldn't you have it both ways with an off-canvas navigation pattern?

Improve this answer
1
  • Currently, the screenshots are the same across devices, I was mainly wondering if the designs should differ between devices so the experience is more enjoyable.
    – Maxwell
    Commented May 15, 2014 at 20:18

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.