Mobile wireframes (Draft 9)

Language selection

Mobile storycards, language selection, draft 9

Home

Mobile storycards, home, draft 9

Code entry

Mobile storycards, code entry, draft 9

Artifact view

Mobile storycards, artifact view, draft 9

My collection

Mobile storycards, my collection, draft 9

My collection (desktop)

Mobile storycards, my collection (desktop), draft 9

Exhibitions

Mobile storycards, exhibitions, draft 9

An exhibition

Mobile storycards, an exhibition, draft 9

Guidelines... for text alignment

Ignore all header text alignment implications from above wireframes. The actual rules for header text alignment are as follows:

• IF the length of the text is short enough to centre-align with the header without exceeding the available text bounds, THEN centre-align with the header (see Fig. 2 and 3)
• ELSE IF the length of the text is lesser than the available text bounds but exceeds the available text bounds when it is centre-aligned with the header, THEN left-align the text within the available text bounds (see Fig. 4)
• ELSE (if the length of the text is greater than the available text bounds), THEN truncate the text and replace the truncated text with ellipses such that the new text length (= newly truncated text + ellipses) is less than but approaches the length of the available text bounds, and left-align said text within the available text bounds (see Fig. 5)

In short: header-centre the text until you can't--then left-align it.

Note:

• Don't centre-align the text with the available text bounds (unless the above rules would take too long to implement, and we're running out of time...) (see Fig. 6)

Guidelines... for element expansion/contraction

Expansion

Focus on the expanded state should slide up such that the top border of the expansion region (i.e., the toggler; coloured yellow in the figures below) is x (x = 30 in Fig. 2) pixels below the screen header, unless this would create a void space in the lower portion of the screen. In the latter case, the end of the virtual space should be equal with the end of the actual screen.

Contraction

No focus change; collapsed region should slide up, but the region above the bottom border of the toggler should not move.

Guidelines... for tapping on a tappable

On tapping (or tap-and-holding) a tappable (e.g., buttons, links, things in a list, etc.), the tappable should highlight to indicate a successful tap (i.e., visual touch feedback). The highlight should persist until the finger leaves the screen.