CoffeeBoy Skeleton: Mock-ups, Part I

CoffeeBoy Skeleton

The CoffeeBoy UX design process reached the skeleton plane! Here we’ll replace the abstract concepts which we’ve developed on the structure plane with concrete UI elements. Our design work will now be characterized by the creation of UI mock-ups. In this post we’ll shortly clarify our goals on the skeleton plane and then create mock-ups giving us an idea of how the layout and the different feedback types will look like in the UI.

CoffeeBoy Series Schedule

What’s up on the skeleton plane?

This plane is the next-to-last station on our design journey, until we’re finally ready to construct CoffeeBoy. Our upcoming design work will focus on the following questions:

  • Which UI elements should we use for particular data and functions1? Should we, for example, apply a slider to enable the specification of the amount of a coffee recipe’s ingredient?
  • Which events (e.g. click or swipe) should be enabled on elements to trigger functions?
  • With which text should we label our elements?
  • Where should we place our elements?
  • How should we give the user optimal orientation (“Where am i now?”)?
  • How should we enable navigation (“How and where can i go from here?”)?

For the most of these questions the Google Material Design guidelines already provide appropriate answers. For example, the guidelines prescribe where to place the page title, and where to put content as well as navigation related function elements. Regarding labeling of the elements (and later formulating feedback texts) we’ll consult our glossary in order to speak the language of the user and use terms consistently.

More than ever it will be important to take care of consistency when making decisions. When choosing elements for the presentation of certain data or functions, it’ll be essential to use the same elements on all pages. We would confuse the user when we would apply a button group for Save, Cancel and Discard functions on one page, and then use a menu for the same function group on an other page, for example.

In order to not overcharge our design capacities and really only focus on the above listed questions, we’ll postpone the decisions about the following aspects to the next and last surface plane:

  • Colors
  • Fonts
  • Icons
  • Measurements
  • Elevations

Our mock-ups will apply a sketchy style with neutral colors, a comic-like font, placeholders for icons, rough measurements and none elevations in order to mask the above aspects.

Let’s now begin with the creation of mock-ups. The first mock-up candidates are the CoffeeBoy UI layout together with it’s elements and components, as well as the feedback types. Thereby we’ll primarily create mock-ups for xsmall and small screen widths, and only consider higher screen widths if there are differences.

Layout for xsmall and small screen widths

App Bar, Side Nav and List

Layout With App Bar, Side Nav And List (XS And SM)
Layout with closed (left) and opened (right) Side Nav
  1. Open Side Nav Icon Button: Click 2 opens the Side Nav.
  2. Page Title: Displays the title of the current page.
  3. App Bar
  4. List
  5. Side Nav: Overlays the App Bar and the current page.
  6. Main Navigation Menu:
    • Contains Menu Items linking to the main pages.
    • Click on a Menu Item closes the Side Nav.
  7. CoffeeBoy Logo
  8. Close Side Nav Icon Button: Click closes the Side Nav.
  9. Page Overlay: Click closes the Side Nav.

Bottom Bar

Layout With Bottom Bar (XS And SM)
Layout with closed (left) and opened (right) Bottom Bar
  1. Bottom Bar:
    • Longpress 3 on a List Item opens the Bottom Bar.
    • Click on a function element (e.g. plain Button or Icon Button) closes the Bottom Bar.
  2. Page Overlay: Click closes the Bottom Bar.

Detail Page

Layout With Detail Page (XS And SM)
Layout with List (left) and Detail Page (right)
  1. List Item: Click on a List Item opens the Detail Page.
  2. Navigate Back Icon Button:
    • Click opens the previous page.
    • This element replaces the Open Side Nav Icon Button when the user navigates one level down from a Main Page. So it’s not possible to open the Side Nav. In the above figure Coffee Recipes is the Main Page and Coffee Recipe is the Detail Page.
  3. Page Title: On a Detail Page the Page Title shows the name of the detail.

Layout for medium screen widths

Detail Page

Layout With List (MD)
Layout with List
Layout With List And Detail Page (MD)
Layout with List and Detail Page
  1. List Item: Click opens the Detail Page.
  2. List Item: Click on an other List Item refreshes the Detail Page with the new details.
  3. Open Side Nav Icon Button: When the List and the Detail Page get displayed side by side then there is no replacement of the Open Side Nav Icon Button by the Navigate Back Icon Button.
  4. Page Title: When the List and the Detail Page get displayed side by side then the Page Title of the Detail Page gets displayed.
  5. Detail Page

Layout for large and xlarge screen widths

Side Nav and Toolbar

Layout With Side Nav And Toolbar (LG And XL)
Layout with Side Nav and Toolbar
  1. Side Nav: Gets permanently displayed.
  2. Toolbar: Gets permanently displayed.

Info feedback

Info Toast (XS And SM)
Info Toast
  1. Info Toast:
    • Pops up for a few seconds or stays until it gets closed by the user.
    • Contains a short message text.
  2. Dismiss Button: Click closes the Info Toast.

Warn feedback

Warn Toast (XS And SM)
Warn Toast
  1. Warn Toast:
    • Pops up and stays until it gets closed by the user.
    • Contains a short message text.
  2. Dismiss Button: Click closes the Warn Toast.
  3. Action Button Group:
    • Provides one or more alternative actions.
    • Click closes the Warn Toast.

Error feedback

Error Dialog

Error Dialog (XS And SM)
Error Dialog
  1. Error Dialog:
    • Pops up and stays until it gets closed by the user.
    • Contains a title and a message text.
  2. Page Overlay: Click closes the Error Dialog.
  3. Dismiss Button: Click closes the Error Dialog.
  4. Action Button Group:
    • Provides one or more alternative actions.
    • Click closes the Error Dialog.

Contextual Error Message

Contextual Error Message (XS And SM)
Contextual Error Message
  1. Contextual Error Message: Gets displayed below e.g. an Input Field.

Severe feedback

Severe Dialog (XS And SM)
Severe Dialog
  1. Severe Dialog:
    • Pops up and stays until it gets closed by the user.
    • Contains a title and a message text.
  2. Page Overlay: Click closes the Severe Dialog.
  3. Dismiss Button: Click closes the Severe Dialog.

Up next

In the next post we’ll go on with the creation of mock-ups. Stay tuned!

Footnotes

  1. When speaking of an element, we could also use the term component. That’s because data and functions can be represented by elements and components in the UI. See the Terminology section of the recent post for more information regarding these terms.
  2. Touch on touch screens.
  3. Longtouch on touch screens.