summaryrefslogtreecommitdiffstats
path: root/wiki/src/blueprint/greeter_revamp_UI.mdwn
blob: 5ee49198c7e3bfde0b260ebd0bf8e5275c2b5985 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
[[!meta title="Revamp the Greeter UI"]]

**Ticket**: [[!tails_ticket 5464 desc="#5464"]]

[[!toc levels=3]]

Rationale
=========

tails-greeter works fine, and its code in not that bad anymore, so on
this side it's now feasible to add features (e.g. [[!tails_ticket
5421]], [[!tails_ticket 5479]]).

However, the greeter UI is difficult to use, and adding more options
in the current state of things would only make things worse
usability-wise.

So, we have to improve the greeter UI to make it more ergonomic and
easier to use.

Current proposal
================

After working on a prototype and do UX testing with Numa people, we arrived to
the proposal described here.

**WARNING**: these complex SVG files are often not well rendered in a browser.
They are thus exported as PNG. If you update the SVG please also update the PNGs.

Flow
----

[[!img greeter-flow.png size="" alt=""]]

<a href="greeter-flow.svg">source</a>

1st screen
----------

  - In the case of a read-write media with a persistent volume:

    [[!img greeter-1st-screen.png size="" alt=""]]

    <a href="greeter-1st-screen.svg">source</a>

  - The **Remember** does not appear if the media is read-only (DVD or
    SD card in read-only mode).

  - The **Persistence** section only appears if there is a persistent
    volume on the media.

### Saved localization

  - On a media with saved localization options, the first region is replaced by a summary of the current settings:

    [[!img greeter-1st-screen-langsaved.png size="" alt=""]]

    <a href="greeter-1st-screen-langsaved.svg">source</a>

  - If the media is read-only, the **Erase** button does not appear.

Guided configuration
--------------------

[[!img greeter-guided-intro.png size="" alt=""]]

<a href="greeter-guided-intro.svg">source</a>


[[!img greeter-guided-context.png size="" alt=""]]

<a href="greeter-guided-context.svg">source</a>


[[!img greeter-guided-save.png size="" alt=""]]

<a href="greeter-guided-save.svg">source</a>


[[!img greeter-guided-check.png size="" alt=""]]

<a href="greeter-guided-check.svg">source</a>

### Resources

  - [Smashing magazine: Progress Trackers in Web Design: Examples and Best
    Practices](http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/)

Advanced configuration
----------------------

[[!img greeter-advanced-screen.png size="" alt=""]]

<a href="greeter-advanced-screen.svg">source</a>

Next steps
==========

Roadmap:

* paper UX testing
* share and discuss results and refine SVG mockups
* design user interface graphics
* implement UI in glade and integrate into the greeter

Resources
=========

UI / UX documentation
---------------------

* [GNOME's studies](http://live.gnome.org) on the subject

Related tickets
---------------

* Moving stuff *out of* the greeter: [[!tails_ticket 5501]]

Past discussions
----------------

* <https://mailman.boum.org/pipermail/tails-dev/2012-March/000936.html>
* thread starting at
  <https://mailman.boum.org/pipermail/tails-dev/2012-March/000972.html>

Past work
---------

* `feature/single_toggle_button` branch in tails-greeter repo