Design/AnacondaStorageUI

From FedoraProject

< Design(Difference between revisions)
Jump to: navigation, search
Line 27: Line 27:
 
== Mockups ==
 
== Mockups ==
  
These are draft 2, updated 28 July 2009.
+
These are draft 4, updated 24 August 2009.
 +
 
 +
=== Changelog ===
 +
* Added IQN to search, multipath, and other SAN devices tabs
 +
* s/Fiber/Fibre
 +
* New filter icon is used consistently across screens
 +
* "Basic vs Advanced Installation" is now renamed "Installation to Basic or Specialized Devices"
 +
* Chopped off UNIX-style device names (woowoo!)
 +
* Modified data vs install target selection screen such that install target list widget is much more compact (so we can fit the longer WWIDs now that we've cut the UNIX-style device names)
  
 
=== Mockup Sources ===
 
=== Mockup Sources ===
Line 33: Line 41:
 
All mockups are sourced in this one SVG file:
 
All mockups are sourced in this one SVG file:
  
[[Media:anaconda-storage_mocks_3.svg|Mockups' Source SVG]]
+
[[Media:anaconda-storage_mocks_4.svg|Mockups' Source SVG]]
  
 
=== Choose Installation Type ===
 
=== Choose Installation Type ===
  
[[Image:anaconda_installtype_3.png|800px]]
+
[[Image:anaconda_installtype_4.png|800px]]
  
 
=== Do you want to upgrade? ===
 
=== Do you want to upgrade? ===
  
[[Image:anaconda_upgradeornot_3.png|800px]]
+
[[Image:anaconda_upgradeornot_4.png|800px]]
  
 
=== Simple Device Selection ===
 
=== Simple Device Selection ===
  
[[Image:anaconda_devselectsimple_3.png|800px]]
+
[[Image:anaconda_devselectsimple_4.png|800px]]
  
 
=== Advanced Device Selection - Local Devices Tab ===
 
=== Advanced Device Selection - Local Devices Tab ===
  
[[Image:anaconda_devselect-localtab_3.png|800px]]
+
[[Image:anaconda_devselect-localtab_4.png|800px]]
  
 
=== Advanced Device Selection - BIOS RAID Devices Tab ===
 
=== Advanced Device Selection - BIOS RAID Devices Tab ===
  
[[Image:anaconda_devselect-biosraid_3.png|800px]]
+
[[Image:anaconda_devselect-biosraid_4.png|800px]]
  
 
=== Advanced Device Selection - Multipath Tab - Unfiltered ===
 
=== Advanced Device Selection - Multipath Tab - Unfiltered ===
  
[[Image:anaconda_devselect-mpathtab1_3.png|800px]]
+
[[Image:anaconda_devselect-mpathtab1_4.png|800px]]
  
 
=== Advanced Device Selection - Multipath Tab - Interconnect Filter ===
 
=== Advanced Device Selection - Multipath Tab - Interconnect Filter ===
  
[[Image:anaconda_devselect-mpathtab2_3.png|800px]]
+
[[Image:anaconda_devselect-mpathtab2_4.png|800px]]
  
 
=== Advanced Device Selection - Multipath Tab - Vendor Filter ===
 
=== Advanced Device Selection - Multipath Tab - Vendor Filter ===
  
[[Image:anaconda_devselect-mpathtab3_3.png|800px]]
+
[[Image:anaconda_devselect-mpathtab3_4.png|800px]]
  
 
=== Advanced Device Selection - Other SAN Tab ===
 
=== Advanced Device Selection - Other SAN Tab ===
  
[[Image:anaconda_devselect-othersan_3.png|800px]]
+
[[Image:anaconda_devselect-othersan_4.png|800px]]
  
 
=== Advanced Device Selection - Search Tab (Port/Target/LUN) ===
 
=== Advanced Device Selection - Search Tab (Port/Target/LUN) ===
  
[[Image:anaconda_devselect-searchtab-ptl_3.png|800px]]
+
[[Image:anaconda_devselect-searchtab-ptl_4.png|800px]]
  
 
=== Advanced Device Selection - Search Tab (WWID) ===
 
=== Advanced Device Selection - Search Tab (WWID) ===
  
[[Image:anaconda_devselect-searchtab-wwid_3.png|800px]]
+
[[Image:anaconda_devselect-searchtab-wwid_4.png|800px]]
  
 
=== Select Partitioning Scheme (Simple Use Case) ===
 
=== Select Partitioning Scheme (Simple Use Case) ===
  
[[Image:anaconda_partscheme_3.png|900px]]
+
[[Image:anaconda_partscheme_4.png|900px]]
  
 
=== Select Partitioning Scheme (Advanced Use Case) ===
 
=== Select Partitioning Scheme (Advanced Use Case) ===
  
[[Image:anaconda_drive_data-install_selection_3.png|900px]]
+
[[Image:anaconda_drive_data-install_selection_4.png|900px]]
  
 
== Mockup Archive ==
 
== Mockup Archive ==
Line 91: Line 99:
 
* [[Media:anaconda-storage-draft1.pdf | Mockups Draft 1, 27 July 2009]] (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-draft2.pdf | Mockups Draft 2, 28 July 2009]] (PDF format)
* [[Media:anaconda-storage-draft3.pdf | Mockups Draft 2, 3 August 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)
  
 
=== Wiki Format ===
 
=== Wiki Format ===
 
* [[Design/AnacondaStorageUI/MockupsDraft1 | Mockups Draft 1, 27 July 2009]] (Wiki Page)
 
* [[Design/AnacondaStorageUI/MockupsDraft1 | Mockups Draft 1, 27 July 2009]] (Wiki Page)
 
* [[Design/AnacondaStorageUI/MockupsDraft2 | Mockups Draft 2, 28 July 2009]] (Wiki Page)
 
* [[Design/AnacondaStorageUI/MockupsDraft2 | Mockups Draft 2, 28 July 2009]] (Wiki Page)
* [[Design/AnacondaStorageUI/MockupsDraft3 | Mockups Draft 2, 3 August 2009]] (Wiki Page)
+
* [[Design/AnacondaStorageUI/MockupsDraft3 | Mockups Draft 3, 3 August 2009]] (Wiki Page)
 +
* Mockups Draft 4, 24 August 2009 (this wiki page)
  
 
== Icon Work ==
 
== Icon Work ==

Revision as of 21:00, 24 August 2009

Contents

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

Anaconda proposed screenflow.png

Inkscape SVG Source

Mockups

These are draft 4, updated 24 August 2009.

Changelog

  • Added IQN to search, multipath, and other SAN devices tabs
  • s/Fiber/Fibre
  • New filter icon is used consistently across screens
  • "Basic vs Advanced Installation" is now renamed "Installation to Basic or Specialized Devices"
  • Chopped off UNIX-style device names (woowoo!)
  • Modified data vs install target selection screen such that install target list widget is much more compact (so we can fit the longer WWIDs now that we've cut the UNIX-style device names)

Mockup Sources

All mockups are sourced in this one SVG file:

Mockups' Source SVG

Choose Installation Type

Anaconda installtype 4.png

Do you want to upgrade?

Anaconda upgradeornot 4.png

Simple Device Selection

Anaconda devselectsimple 4.png

Advanced Device Selection - Local Devices Tab

Anaconda devselect-localtab 4.png

Advanced Device Selection - BIOS RAID Devices Tab

Anaconda devselect-biosraid 4.png

Advanced Device Selection - Multipath Tab - Unfiltered

Anaconda devselect-mpathtab1 4.png

Advanced Device Selection - Multipath Tab - Interconnect Filter

Anaconda devselect-mpathtab2 4.png

Advanced Device Selection - Multipath Tab - Vendor Filter

Anaconda devselect-mpathtab3 4.png

Advanced Device Selection - Other SAN Tab

Anaconda devselect-othersan 4.png

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

Anaconda devselect-searchtab-ptl 4.png

Advanced Device Selection - Search Tab (WWID)

Anaconda devselect-searchtab-wwid 4.png

Select Partitioning Scheme (Simple Use Case)

Anaconda partscheme 4.png

Select Partitioning Scheme (Advanced Use Case)

Anaconda drive data-install selection 4.png

Mockup Archive

PDF Format

Wiki Format

Icon Work

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:

Anaconda installtypes-iconsketches clean-multiboot-upgrade.png

Other:

Anaconda installtypes-iconsketches 5installoptions.png