Mobile wireframes (Draft 9)
On this page (overview) |
---|
|
On this page (detail) |
|
Language selection
Mobile storycards, language selection, draft 9
Language selection splash page |
---|
|
Home
Mobile storycards, home, draft 9
Home, while in the museum |
Home, when outside of the museum |
---|---|
|
|
Language change slider open |
---|
|
Login screen, user login |
Login screen, successful login |
---|---|
|
|
Login screen, unsuccessful login |
Home, successful logout |
---|---|
|
|
Code entry
Mobile storycards, code entry, draft 9
Default code entry |
Invalid code entered |
---|---|
|
|
Default code entry, chromed |
Invalid code entered, chromed |
---|---|
|
|
Artifact view
Mobile storycards, artifact view, draft 9
Standard view, default, collapsed |
Standard view, expanded |
---|---|
|
|
Large image portrait |
Large image landscape |
---|---|
|
|
No image available |
Fullscreen artifact image |
---|---|
|
|
Artifact collected |
Artifact uncollected |
---|---|
|
|
Comment entry |
---|
|
My collection
Mobile storycards, my collection, draft 9
Default, empty |
---|
|
Default, grid |
Default, list |
---|---|
|
|
Send form |
---|
|
My collection (desktop)
Mobile storycards, my collection (desktop), draft 9
Default, grid view |
---|
|
List view |
---|
|
Exhibitions
Mobile storycards, exhibitions, draft 9
Exhibitions browsing, default |
Upcoming exhibition detail |
---|---|
|
|
An exhibition
Mobile storycards, an exhibition, draft 9
An exhibition, default |
An exhibition, about |
---|---|
|
|
An exhibition, catalogue, grid (default) |
An exhibition, catalogue, list |
---|---|
|
|
An exhibition, catalogue, theme/all, grid |
An exhibition, catalogue, theme/all, list |
---|---|
|
|
An exhibition, guestbook |
---|
|
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)
Fig. 1: Available text space |
---|
|
Fig. 2: Short-length, hd. centre-aligned |
---|
|
Fig. 3: "Perfect"-length, hd. centre-aligned |
---|
|
Fig. 4: Medium-length, av. space left-aligned |
---|
|
Fig. 5: Long-length, av. space left-aligned |
---|
|
Fig. 6: Incorrectly aligned text |
---|
|
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.
Fig. 1: Collapsed state |
---|
|
Fig. 2: Expanded state, proper |
Fig. 3: Expanded state, improper |
---|---|
|
|
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.
Fig. 1: Button, untapped |
Fig. 2: Button, tapped |
---|---|
|