wiki/src/blueprint/greeter_revamp_UI.mdwn

   1 [[!meta title="Revamp the Greeter UI"]]
   2
   3 **Ticket**: [[!tails_ticket 5464 desc="#5464"]]
   4
   5 [[!toc levels=2]]
   6
   7 Rationale
   8 =========
   9
  10 tails-greeter works fine, and its code in not that bad anymore, so on
  11 this side it's now feasible to add features (e.g. [[!tails_ticket
  12 5421]], [[!tails_ticket 5479]]).
  13
  14 However, the greeter UI is difficult to use, and adding more options
  15 in the current state of things would only make things worse
  16 usability-wise.
  17
  18 So, we have to improve the greeter UI to make it more ergonomic and
  19 easier to use.
  20
  21 Current proposal
  22 ================
  23
  24 After working on a prototype and do UX testing with Numa people, we arrived to
  25 the proposal described here.
  26
  27 **WARNING**: these complex SVG files are often not well rendered in a browser.
  28 They are thus exported as PNG. If you update the SVG please also update the PNGs.
  29
  30 Flow
  31 ----
  32
  33 [[!img greeter-flow.png size="" alt=""]]
  34
  35 <a href="greeter-flow.svg">source</a>
  36
  37 1st screen
  38 ----------
  39
  40 When started from DVD or freshly installed media:
  41
  42 [[!img greeter-1st-screen-dvd.png size="" alt=""]]
  43
  44 <a href="greeter-1st-screen-dvd.svg">source</a>
  45
  46 On a media with a persistent volume:
  47
  48 [[!img greeter-1st-screen-persistence.png size="" alt=""]]
  49
  50 <a href="greeter-1st-screen-persistence.svg">source</a>
  51
  52 On a media with saved language and a persistent volume:
  53
  54 [[!img greeter-1st-screen-langsaved.png size="" alt=""]]
  55
  56 <a href="greeter-1st-screen-langsaved.svg">source</a>
  57
  58 Guided configuration
  59 --------------------
  60
  61 [[!img greeter-guided-intro.png size="" alt=""]]
  62
  63 <a href="greeter-guided-intro.svg">source</a>
  64
  65
  66 [[!img greeter-guided-context.png size="" alt=""]]
  67
  68 <a href="greeter-guided-context.svg">source</a>
  69
  70
  71 [[!img greeter-guided-save.png size="" alt=""]]
  72
  73 <a href="greeter-guided-save.svg">source</a>
  74
  75
  76 [[!img greeter-guided-check.png size="" alt=""]]
  77
  78 <a href="greeter-guided-check.svg">source</a>
  79
  80 Advanced configuration
  81 ----------------------
  82
  83 [[!img greeter-advanced-screen.png size="" alt=""]]
  84
  85 <a href="greeter-advanced-screen.svg">source</a>
  86
  87 Next steps
  88 ==========
  89
  90 Roadmap:
  91
  92 * paper UX testing
  93 * share and discuss results and refine SVG mockups
  94 * design user interface graphics
  95 * implement UI in glade and integrate into the greeter
  96
  97 Resources
  98 =========
  99
 100 UI / UX documentation
 101 ---------------------
 102
 103 * [GNOME's studies](http://live.gnome.org) on the subject
 104
 105 Related tickets
 106 ---------------
 107
 108 * Moving stuff *out of* the greeter: [[!tails_ticket 5501]]
 109
 110 Past discussions
 111 ----------------
 112
 113 * <https://mailman.boum.org/pipermail/tails-dev/2012-March/000936.html>
 114 * thread starting at
 115   <https://mailman.boum.org/pipermail/tails-dev/2012-March/000972.html>
 116
 117 Past work
 118 ---------
 119
 120 * `feature/single_toggle_button` branch in tails-greeter repo
 121
 122