Initial design ideas and sketches

[LukasKalbertodt]

I looked at a few other "video websites" (including YouTube, Vimeo and the ARD Mediathek) to get some inspiration and know what users are used to. We don't want to do something completely radical, but rather be close to stuff users already know. That way, it's easier to use.

Sorry for the rather ugly sketches, should not have used paper with such a bold grid! Unfortunately, I were unable to find a free and good program for this purpose.

---

General considerations/facts

• We have some kind of structure (probably a tree) that the user needs to navigate. E.g. "lectures" and "conferences" as root level nodes, "biology" and "physics" as children of "lectures", "astrophysics" and "quantum mechanics" as children of "physics". Administrator are probably able to make this tree arbitrarily deep.
  • Admins of nodes should have some freedom in choosing what content to show
• The website should work well on desktop and mobile (surprise, duh).
• The front page should:
  • Be able to highlight some videos that the organization administrator wants to highlight.
  • For new visitors: look interesting and invite to browse and watch some videos.
  • For regular users: provide quick access to what that user probably wants to do.
• Assumption: we want the provide the user with some kind of own "library" or "bookmarks". This might not be true, but we will see.

[LukasKalbertodt]

Main Layout

These pictures show the layout elements of the page. The main content (<main>) is hatched. The orange marker represents areas that can be scrolled.

Desktop

Clicking on the user avatar in the top right opens the user menu:

A few notes:

• Clicking on a sidebar navigation item immediately loads the corresponding body in the <main> element and changes the URL. However, as the loading is done in JS, the sidebar does not flash but stays exactly as it is, so users can still quickly navigate without waiting for the intermediate nodes to load.
• Sticky header/sidebar?
  • (a) Header and sidebar are fixed and do not scroll. Only the <main> scrolls. (Pro: always access to all important menus, Cons: eats screen space)
  • (b) Only header is fixed, sidebar scrolls with <main>
  • (c) Header and sidebar scroll with <main>
• Alternative: sidebar on the right.
• Alternative: "legal" and "about" and this stuff in the user menu instead. (Also compare the mobile layout.)
• Alternative: Also show the username left of the avatar, even when user menu is not opened.
• Big alternative: put top level tree nodes in header?
  • Is closer to the current design
  • Pro: you can always easily access all top level nodes, even if the tree is expanded into a lot of items in the sidebar
  • Cons: uses more header space
  • Cons: now navigation happens in two UI elements. That's not great.

Alternative

This merges the "home" thing into the navigation tree (which makes sense IMO) and removes the "navigation" header. But in this particular image, "bookmarks" are also removed.

Mobile

Notes:

• When the navigation menu is opened, the <main> is darkened and one cannot interact with it (trying to do so closes navigation menu).
• Navigation menu works like on desktop (instantly loads content).
• Alternatives to "Struktur" (structure): menu, navigation
• Alternatives to "Lesezeichen" (bookmarks): library, saved, my courses

Alternatives

Burger menu

• Alternative: menu on the left
• Cons: more difficult to reach with thumb
• Cons: if we just want to make the "navigation" part scrollable (like in the desktop design), this will be problematic with small screen heights
• Cons: burger menu is not recognized/understood by many less experienced users
• Pro: closer to desktop design
• Pro: works better if we actually don't have bookmarks and can't find a third item to add to the bottom bar (only two things look bad)

Floating nav button

• This design is only useful if we don't have a bookmark main nav item
• Cons: Maybe unusual design
• Cons: Logo as "home" link is not recognized/understood by many less experienced users

[LukasKalbertodt]

Content boxes

Main idea: each node in the tree has a page and that page can be configured. It is just a list of "content boxes", each of which can be configured individually. So it's a biiiiit like a CMS, but a lot less powerful.

Here are the different content boxes:

Highlight video(s)/Featured video(s)

• Potentially allow multiple videos that are shown as a carousel.

Text Block

• Maybe ability to add an image or images?
• Maybe some simple formatting?

Video List

This is probably the most important content box and is somewhat configurable. It might have different designs/layouts. Three shown here:

• Source:
  • An Opencast Series
  • User recommendation (??)
  • All videos below one node
• Sorting: newest, most watched, ... (configurable by admin)
• Layouts:
  • Horizontal scrolling
  • Grid
  • Vertical list
• Probably rather not use too many different layouts (YouTuve does that, too, though)

Children node list

• Maaaybe those nodes get a thumbnail/logo, otherwise just the text
• Not sure if "show all" to expand or scrolling or ...
• Having that on the front page would also serve as a non-sidebar menu of top level nodes (compare layout considerations in previous comment)

[LukasKalbertodt]

Player page

We discussed making the player page configurable (via its parent node). I think we don't want to allow too much modification. Thus, I was thinking:

• The start of the page is always the same: the player, video title, description
• Below, content boxes can be placed (by default maybe "other videos of {that node}" and "related videos")

I also ignored the possibility of user comments for now.

Desktop

• Maybe, when scrolling, we want to shrink the video like in the ARD mediathek (example, but just take any video).

Mobile

• Use all available width
• Maybe just scroll the area below video (i.e. video is always visible)?
• This will be tricky for landscape orientation of phones, but certainly doable somehow

[JulianKniephoff]

Ok, I made a quick pass through; the only thing I have a hard opinion about right now is that I tend to heavily dislike "overlay" type things, like a fixed header or the little round button in the bottom right that would open the navigation in one of your mobile layouts. As someone who uses their browser at a zoom level of at least 200% at all times, I can say that they are usually not very accessible, unfortunately. :thinking:

[lkiesow]

Questions:

• top-right login
• how to handle many sub-categories
• sub-page on mobile (where can I find it)?
• legal" and "about at bottom
• where do we get an avatar
• keep it simple: start with one block layout
• Children node list necessary?
• Player page? Or block?
• Player: Mobile + Landscape

[LukasKalbertodt]

We discussed this internally a bit already. One good change we kind of agreed on: the navigation through the tree should not show all levels. Only show the children of your current realm and display bread crumbs above it. It's still unclear how this would work on a realm without children, but overall that's probably much better.

Apart from that, the issue of burger menu vs. alternatives came up again. I did some research on that again:

---

Thoughts/research on mobile navigation/menus

Disadvantages of Hamburger menu

• Top left button is hard to reach with thumb on mobile
• Top left icon clashes with logo and back button (especially in iOS designs)
• Hides important navigational items, thus user interact with those less
• Icon might not be as recognizable for less experienced users
  • though all A/B tests I could find are pretty old and Hamburger-menus have been with us for quite some time now

Advantages of Hamburger menu

• We can hide all kinds of stuff in it (we have a lot of freedom)
  • Though that might also lead to sloppy design
• It's used in many other apps/websites, so users are mostly familiar with it

Why to use bottom tabs for navigation

See https://ux.stackexchange.com/a/101604/138418

• Better user engagement (many big players performed lots of tests)
• Better discoverability of main "features"
• Easily reachable with thumb on mobile (for right and left-handed people)

How do others do it?

Icon top left, menu left

The Hamburger icon is on the very top left (the logo, if existing, is right of it). If clicked, the menu opens from the left, spans the full screen height and overlays the body content (which is usually darkened).

• Google
• ARD Mediathek
• Amazon
• Stud.IP
• Wikipedia
• Netflix

Bottom navigation tabs

Note that most, if not all, of these sites somewhat recently switched from hamburger menu.

• YouTube & YouTube Music
• Facebook
• Twitter
• Google Maps

Other solutions

• Reddit: burger icon top right, menu top (full width, overlays main content)
• Ebay: burger icon top right, menu slides in from the right
• StackOverflow: burger icon top left, menu top left "bubble" (neither full width nor height, overlays main content)
• GitHub: burger icon top left, menu top (full width, pushes away main content)
• Twitch: "..." button on top right, menu small button, but that's only for rather unimportant stuff.

---

Now, this sounds pretty bad for the burger. However, one should note that many sites still use it and work fine. It is a valid solution. And I wouldn't terribly mind implementing that. However, I think the bottom navigation tabs are better in many ways.

I will now implement a mockup of that, and then probably also one for the burger menu. Then we can decide.

[LukasKalbertodt]

Now that I started implementing layout/design stuff, I got a couple new thoughts. Stating them here just for protocol.

In the mobile designs above one big problem is that the the "child realms" are hidden by default. So users first have to discover how to navigate the tree structure. Users are more drawn to the content boxes of the intermediate realm, which is potentially not what they want. In particular, they might get confused to see a bunch of "newest videos" or similar content, but not the immediate children.

This problem leads me to believe that this "global sidebar" is not a great idea. Instead what I will try next is the following:

• The "global layout" (i.e. what's the same for all routes) is just header + <main>.
• Certain routes can add a "sidebar" themselves. I would choose a different design than in the sketches above though. Those routes can then also better switch between mobile and desktop design. I also have a few specific ideas already.

[LukasKalbertodt]

All of this is fairly old and the design has diverged quite a bit by now. In any case, there is not really any point in keeping this open.