From FedoraProject
 
(42 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
= Anaconda Storage UI Design =
 
= Anaconda Storage UI Design =
  
* '''Trac Ticket''': https://fedorahosted.org/design-team/ticket/2
+
'''Mission Statement:''' To make it easier to find and identify the device(s) that you want to work with in anaconda, especially when there are large numbers of devices and/or types of devices present.
  
== Discussion Topics ==
+
== Resources ==  
 +
* '''Trac Ticket for redesign work''': https://fedorahosted.org/design-team/ticket/2
 +
* '''Trac Ticket for icon work''': https://fedorahosted.org/design-team/ticket/63
  
These are ripped from [http://www.redhat.com/archives/anaconda-devel-list/2009-June/msg00259.html Joel's notes] posted to anaconda-devel-list.
+
== Content ==
 +
* [[Design/AnacondaStorageUI/DiscussionTopicsFromBerlin09 | Discussion topics from FUDcon Berlin 09 Work]]
 +
* [[Design/AnacondaStorageUI/MiscMockupIdeas | Miscellaneous Mockup Ideas]]
  
=== 1. Contextual Help ===
+
== Screen Flows ==
  
This refers to text that explains stuff that is not be trivial to understand. Instead of doing a help mechanism, we
+
=== Fedora 11 Anaconda Screenflow ===
could create a small explanation label, where needed, that goes under the concept that needs explaining.  Much like
 
http://library.gnome.org/misc/release-notes/2.26/figures/rnusers.brasero.png.en_GB or http://library.gnome.org/misc/release-notes/2.26/figures/rnusers.epiphany.png.en_GB where the buttons have the name and the explanation in some other size and are slightly clear.
 
  
=== 2. Simplified Device Names ===
+
[[Image:anaconda_fedora11_screenflow.png|800px]]
  
Have simplified device names.  To have "sda" instead of "/dev/sda" and we would place the whole path "/dev/sda" as a small comment on the bottom of the device name.  I'm guessing this would ease the user experience with dmraid type devices.
+
[[Media:anaconda_fedora11_screenflow.svg|Inkscape SVG Source]]
  
See 'Simplified Device Names' mockup below.
+
=== Proposed Anaconda Screenflow ===
  
=== 3. Verb Labels ===
+
'''The graphic below is out-of-date and needs to be updated.'''
  
Use verbs for the actions.  We have already been discussing this in
+
[[Media:anaconda_proposed_screenflow.png|800px]]
the list.
 
  
=== 4. Size Labels ===
+
[[Media:anaconda_proposed_screenflow.svg|Inkscape SVG Source]]
  
Use Gig for the sizes.  I had missed this in previous posts.  But it be a good idea to have the size in Gb after 999 Mb.  We can have a function that returns the show-able string.
+
== Mockups ==
  
=== 5. Merge Tree & Bar View ===
+
These are draft 5, updated 12 September 2009.
  
To have the bar information on the tree view. It would be on the far right of each row within the list and it would just have minimal information as most of it is contained in the tree view.
+
=== Changelog ===
 +
==== Design Changes/Additions ====
 +
* the mockups are now organized into two separate paths
 +
* a status bar to indicate the total number of devices & space present in the UI vs. the selected number of devices & space has been added.
 +
* there are now icons to explain the 5 partition screens in the basic screen flow
 +
* boot device selection has been removed from the partition scheme screen. it was a small dropdown on that screen, now it is a full-blown screen.
 +
* new upgrade/install icons that are distro-agnostic / de-branded
 +
* RAID devices no longer use UNIX-style device names
  
=== 6. Installation Type Selection Separated Into a New Screen ===
+
==== Bug Fixes ====
 +
* upper-right-corner list filter boxes have been cleaned up (removed old unused items)
 +
* the capacity column was missing from several SAN-related screens. It has been added.
 +
* fixed more instances of the term "fiber" to read "fibre"
 +
* the term "bios raid" has been replaced with "firmware raid" (for UEFI consideration)
 +
* the term "product name" has been replaced with "model"
 +
* usage of the term "device" has been made consistent throughout the mockups. there are no more references to "drive"
  
Put the type of installation (where we select "use entire drive", "Replace existing Linux system"...) in a separate window with additional
+
=== Unaddressed Itches to Scratch ===
comments on the options.  This has two advantages, IMO, 1. We give the user more info so he/she can make an informed decision. 2. We don't show the encrypted check box when it is not needed (less confusion for the user).  I still don't know exactly where to put the advanced configuration button in this case though.
+
* 'remove dmraid device' button - why is it in anaconda today? what does it do? why is it needed?
 +
* explore creating an alternative view of SAN devices using path tree
 +
* install types screen in basic screen flow - clean it up? more info on what each does? what is "free" space?
 +
* your concern goes here! :)
  
See 'Choose Install Type' mockup below.
+
=== Mockup Sources ===
  
=== 7. Select More Than One Device to Shrink ===
+
All mockups are sourced in this one SVG file:
  
Giving the user the possibility to select more than one device to shrink by using a checkbox instead of a drop down menu. Don't really
+
[[Media:anaconda-storage_mocks_5.svg|Mockups' Source SVG]]
know how much of a good idea this is, since I don't really know how that is coded, but its worth considering IMO.
 
  
=== 8. Move Action Buttons for Storage List from Top to Bottom ===
+
There are two paths through the mockups. One is for using working with '''basic devices''' such as internal IDE/ATA drives, the other is for working with '''specialized devices''' such as SANs, Firmware RAID, etc.
  
The location of the action buttons would be better on the bottom left.  This goes better with the look and feel of other gnome
+
=== Basic Path ===
applications.  So we would have the tree view, then the action buttons and then the "continue" & "Back" buttons.
 
  
=== 9. Add Storage Selection Dialog ===
+
==== Choose Installation Type ====
  
We should pop up a window with all the "create" possibilities ("LVM - physical volume", "LVM - Logical Volume" ....) for the customize partition "create" button. They would be handled with a comboboxe and would have a little explanation beneath the choice type. The user would select what he/she wants and a screen that creates the device would pop up.
+
[[Image:anaconda_basic_installtype_5.png|800px]]
  
See 'Add Storage' mockup below.
+
==== Do you want to upgrade? ====
  
== Mockups By Screen ==
+
[[Image:anaconda_basic_upgradeornot_5.png|800px]]
  
=== Choose Install Type ===
+
==== Select Device(s) ====
  
[[Image:anacondastorageUI-chooseinstalltype.png]]
+
[[Image:anaconda_basic_devselect_5.png|800px]]
  
[[Media:anacondastorageUI-chooseinstalltype.svg | SVG Source]]
+
==== Choose Partitioning Scheme ====
  
=== Add Storage ===
+
[[Image:anaconda_basic_partscheme_5.png|900px]]
  
[[Image:anacondastorageUI-addstorage.png]]
+
====== Alternative ======
 +
[[Image:anaconda_basic_partscheme_5b.png|900px]]
  
[[Media:anacondastorageUI-addstorage.svg | SVG Source]]
+
* explain free space better - is it 'unpartitioned' ? 'free space' is ambiguous
  
=== Simplified Device Names ===
+
==== Select Boot Device ====
  
[[Image:anacondastorageUI-friendlypartitionnames.png]]
+
[[Image:anaconda_basic_bootselect_5.png|800px]]
  
= UI Complaints =
+
=== Specialized Device Path ===
  
* finding and identifying the device that I want when there are large numbers of devices present, filtering out the devices I don't want
+
==== Choose Installation Type ====
 +
 
 +
[[Image:anaconda_adv_installtype_5.png|800px]]
 +
 
 +
==== Do you want to upgrade? ====
 +
 
 +
[[Image:anaconda_adv_upgradeornot_5.png|800px]]
 +
 
 +
==== Advanced Device Selection - Local Devices Tab ====
 +
 
 +
[[Image:anaconda_adv_devselect-localtab_5.png|800px]]
 +
 
 +
==== Advanced Device Selection - Firmware RAID Devices Tab ====
 +
 
 +
[[Image:anaconda_adv_devselect-biosraid_5.png|800px]]
 +
 
 +
==== Advanced Device Selection - Multipath Tab - Unfiltered ====
 +
 
 +
[[Image:anaconda_adv_devselect-mpathtab1_5.png|800px]]
 +
 
 +
==== Advanced Device Selection - Multipath Tab - Interconnect Filter ====
 +
 
 +
[[Image:anaconda_adv_devselect-mpathtab2_5.png|800px]]
 +
 
 +
==== Advanced Device Selection - Multipath Tab - Vendor Filter ====
 +
 
 +
[[Image:anaconda_adv_devselect-mpathtab3_5.png|800px]]
 +
 
 +
==== Advanced Device Selection - Other SAN Tab ====
 +
 
 +
[[Image:anaconda_adv_devselect-othersan_5.png|800px]]
 +
 
 +
==== Advanced Device Selection - Search Tab (Port/Target/LUN) ====
 +
 
 +
[[Image:anaconda_adv_devselect-searchtab-ptl_5.png|800px]]
 +
 
 +
==== Advanced Device Selection - Search Tab (WWID) ====
 +
 
 +
[[Image:anaconda_adv_devselect-searchtab-wwid_5.png|800px]]
 +
 
 +
=== Select Boot Device ===
 +
 
 +
[[Image:anaconda_adv_bootselect_5.png|900px]]
 +
 
 +
== Mockup Archive ==
 +
=== PDF Format ===
 +
* [[Media:anaconda-storage-draft1.pdf | Mockups Draft 1, 27 July 2009]] (PDF format)
 +
* [[Media:anaconda-storage-draft2.pdf | Mockups Draft 2, 28 July 2009]] (PDF format)
 +
* [[Media:anaconda-storage-draft3.pdf | Mockups Draft 3, 3 August 2009]] (PDF format)
 +
* [[Media:anaconda-storage-draft4.pdf | Mockups Draft 4, 24 August 2009]] (PDF format)
 +
* '''Mockups Draft 5, 12 September 2009'''
 +
** [[Media:anaconda-storage-basic-draft5.pdf | Basic Path]] (PDF format)
 +
** [[Media:anaconda-storage-adv-draft5.pdf | Advanced Path]] (PDF format)
 +
 
 +
=== Wiki Format ===
 +
* [[Design/AnacondaStorageUI/MockupsDraft1 | Mockups Draft 1, 27 July 2009]] (Wiki Page)
 +
* [[Design/AnacondaStorageUI/MockupsDraft2 | Mockups Draft 2, 28 July 2009]] (Wiki Page)
 +
* [[Design/AnacondaStorageUI/MockupsDraft3 | Mockups Draft 3, 3 August 2009]] (Wiki Page)
 +
* [[Design/AnacondaStorageUI/MockupsDraft4 | Mockups Draft 4, 24 August 2009]] (Wiki Page)
 +
* Mockups Draft 5, 12 September 2009 (this wiki page)
 +
 
 +
== Icon Work ==
 +
 
 +
All icon work here is meant to be used with the GNOME icon theme and in some cases uses components from that icon theme. It is licensed under the GPLv2.
 +
 
 +
[https://fedorahosted.org/design-team/ticket/63 Design Team ticket 63] concerns the updating of icons in Anaconda. Some icons may need to be redesigned/created also as part of this UI redesign effort. Some notes on this follow.
 +
 
 +
=== Install Type Icons ===
 +
 
 +
Right now we have install and upgrade. One idea proposed in UI feedback in that we have three install types:
 +
 
 +
* clean install
 +
* multiboot install (don't overwrite other OSes)
 +
* upgrade
 +
 
 +
Here's some icons to demonstrate these:
 +
 
 +
[[Image:anaconda_installtypes-iconsketches_clean-multiboot-upgrade.png]]
 +
 
 +
=== Partition Scheme Icons ===
 +
 
 +
==== Sketches ====
 +
 
 +
[[Image:anaconda_installtypes-iconsketches_5installoptions.png]]
 +
 
 +
==== Icons ====
 +
 
 +
===== Downloads =====
 +
* [[Media:anaconda_partscheme-icons.svg | SVG source for all 5 icons]]
 +
* [[Media:anaconda_partscheme-icons.tar.gz | tar.gz of all 5 icons]]
 +
 
 +
===== Preview =====
 +
* [[Image:anaconda_partscheme-icon_all.png]] use all partitions
 +
* [[Image:anaconda_partscheme-icon_replace.png]] replace linux partitions
 +
* [[Image:anaconda_partscheme-icon_shrink.png]] shrink partitions and install to unpart space
 +
* [[Image:anaconda_partscheme-icon_unpart.png]] use all unpartitioned space
 +
* [[Image:anaconda_partscheme-icon_custom.png]] custom layout
 +
 
 +
=== Misc Icons ===
 +
 
 +
==== Dropdown List Column Selector Icon ====
 +
* [[Image:icon_list-column-selector.png]]
 +
* [[Media:icon_list-column-selector.svg | Source SVG]]

Latest revision as of 01:00, 11 December 2009

Anaconda Storage UI Design

Mission Statement: To make it easier to find and identify the device(s) that you want to work with in anaconda, especially when there are large numbers of devices and/or types of devices present.

Resources

Content

Screen Flows

Fedora 11 Anaconda Screenflow

Anaconda fedora11 screenflow.png

Inkscape SVG Source

Proposed Anaconda Screenflow

The graphic below is out-of-date and needs to be updated.

800px

Inkscape SVG Source

Mockups

These are draft 5, updated 12 September 2009.

Changelog

Design Changes/Additions

  • the mockups are now organized into two separate paths
  • a status bar to indicate the total number of devices & space present in the UI vs. the selected number of devices & space has been added.
  • there are now icons to explain the 5 partition screens in the basic screen flow
  • boot device selection has been removed from the partition scheme screen. it was a small dropdown on that screen, now it is a full-blown screen.
  • new upgrade/install icons that are distro-agnostic / de-branded
  • RAID devices no longer use UNIX-style device names

Bug Fixes

  • upper-right-corner list filter boxes have been cleaned up (removed old unused items)
  • the capacity column was missing from several SAN-related screens. It has been added.
  • fixed more instances of the term "fiber" to read "fibre"
  • the term "bios raid" has been replaced with "firmware raid" (for UEFI consideration)
  • the term "product name" has been replaced with "model"
  • usage of the term "device" has been made consistent throughout the mockups. there are no more references to "drive"

Unaddressed Itches to Scratch

  • 'remove dmraid device' button - why is it in anaconda today? what does it do? why is it needed?
  • explore creating an alternative view of SAN devices using path tree
  • install types screen in basic screen flow - clean it up? more info on what each does? what is "free" space?
  • your concern goes here! :)

Mockup Sources

All mockups are sourced in this one SVG file:

Mockups' Source SVG

There are two paths through the mockups. One is for using working with basic devices such as internal IDE/ATA drives, the other is for working with specialized devices such as SANs, Firmware RAID, etc.

Basic Path

Choose Installation Type

Anaconda basic installtype 5.png

Do you want to upgrade?

Anaconda basic upgradeornot 5.png

Select Device(s)

Anaconda basic devselect 5.png

Choose Partitioning Scheme

Anaconda basic partscheme 5.png

Alternative

Anaconda basic partscheme 5b.png

  • explain free space better - is it 'unpartitioned' ? 'free space' is ambiguous

Select Boot Device

Anaconda basic bootselect 5.png

Specialized Device Path

Choose Installation Type

Anaconda adv installtype 5.png

Do you want to upgrade?

Anaconda adv upgradeornot 5.png

Advanced Device Selection - Local Devices Tab

Anaconda adv devselect-localtab 5.png

Advanced Device Selection - Firmware RAID Devices Tab

Anaconda adv devselect-biosraid 5.png

Advanced Device Selection - Multipath Tab - Unfiltered

Anaconda adv devselect-mpathtab1 5.png

Advanced Device Selection - Multipath Tab - Interconnect Filter

Anaconda adv devselect-mpathtab2 5.png

Advanced Device Selection - Multipath Tab - Vendor Filter

Anaconda adv devselect-mpathtab3 5.png

Advanced Device Selection - Other SAN Tab

Anaconda adv devselect-othersan 5.png

Advanced Device Selection - Search Tab (Port/Target/LUN)

Anaconda adv devselect-searchtab-ptl 5.png

Advanced Device Selection - Search Tab (WWID)

Anaconda adv devselect-searchtab-wwid 5.png

Select Boot Device

Anaconda adv bootselect 5.png

Mockup Archive

PDF Format

Wiki Format

Icon Work

All icon work here is meant to be used with the GNOME icon theme and in some cases uses components from that icon theme. It is licensed under the GPLv2.

Design Team ticket 63 concerns the updating of icons in Anaconda. Some icons may need to be redesigned/created also as part of this UI redesign effort. Some notes on this follow.

Install Type Icons

Right now we have install and upgrade. One idea proposed in UI feedback in that we have three install types:

  • clean install
  • multiboot install (don't overwrite other OSes)
  • upgrade

Here's some icons to demonstrate these:

Error creating thumbnail: Unable to save thumbnail to destination

Partition Scheme Icons

Sketches

Error creating thumbnail: Unable to save thumbnail to destination

Icons

Downloads
Preview
  • Error creating thumbnail: Unable to save thumbnail to destination
    use all partitions
  • Error creating thumbnail: Unable to save thumbnail to destination
    replace linux partitions
  • Error creating thumbnail: Unable to save thumbnail to destination
    shrink partitions and install to unpart space
  • Error creating thumbnail: Unable to save thumbnail to destination
    use all unpartitioned space
  • Error creating thumbnail: Unable to save thumbnail to destination
    custom layout

Misc Icons

Dropdown List Column Selector Icon

  • Error creating thumbnail: Unable to save thumbnail to destination
  • Source SVG