search

V-Squared / V-Squared.github.io

Initiative for Modular and Upgradable Mini and All-In-One PC. Standards — Know How — Blueprints — Trailblazer Products
http://v-squared.github.io/
Other
2 stars 1 forks source link

Library Metaphor for V² Navigation #44

Closed VillageHubertChen closed 8 years ago

VillageHubertChen commented 8 years ago
VillageHubertChen commented 8 years ago

Library Metaphor for Navigation

Table of Contents

Library Metaphor Explained

Finding Articles of your interest on the V² Site is the same problem you are faced with when entering a library. You already know how to do that in a Library. So we modeled the V²Site Navigation after the Library Metaphor.

Name Explanation
Shelf Book Shelf: Imagine a Library where every shelf only contains books to one topic. The top of the shelf has a big label of the topic's name. The V² Site is the Book Shelf or short Shelf.
Board Board of Shelf: Each Board only contains books to the same topic. We color coded each to help you find it faster the next time.
Book We bind collection of Articles on the same topic into one Book.
Article Collection Small Books only contain one collection of Articles. However in big books we group Articles in Article Collection once there are more than 10 Articles. This helps you to keep an overview.
Article Writing on one topic of about 1 ... 15 pages lengths
ToC Table of Contents. Linked List of all Heading 1 of the Article

Tooltips teach Library Metaphor

Nav Bar Tooltip
Board This is the Board Navigation Bar. Each of its Menu Items represent a colored board in the V² Modular PC Shelf
Book This is the Book Navigation Bar. Each of its Menu Items represents a Book which is a collection of Articles.
Article This is the Article Navigation Bar. Click on the Article of your Interest to display it.
Table of Content The Table of Content Bar lists you all Top Level Headings of this Article. Click on a Heading to scroll the Article to it.

Tip: This is the link to the info Icon that is invoking the tooltip: Icon: https://design.google.com/icons/#ic_info

Mapping of Metaphor Element to Nav Bar

Level Metaphor Nav Bar Nav Bar Placement
0 Shelf Shelf Bar Drop Down Menu from top
1 Board Board Bar Horizontal Navigation Bar above Jumbotron. Boards are color coded
2 Book Book Bar Horizontal Navigation Bar under Jumbotron
3 Article Collection Article Bar Vertical Navigation Bar left to body
4 Article Article Bar Vertical Navigation Bar left to body
5 ToC ToC Bar Vertical Navigation Bar right to body

[^Shelf]: Right now we only have one Shelf, which represents the: V² Modular PC. As such we do not need yet the drop down menu to switch between shelves. This is reserved for future growth of the V² Initiative, after the success of the V² Modular PC.

Note: The Article Bar can contain one or two levels of navigation. In case of one level it is a simple list. In case of two levels it is a structured list with two levels.

6 Levels in Design, 5 Levels implemented now

We are counting 6 Levels now as we show the placements of the various Navigation Bars. However at this time the Shelf Bar is not used yet, so while the design offers 6 Levels of Navigation, the current implementation uses only 5 Levels of navigation

Examples

4 Level Navigation Example

Level Name Menu Item Notes
0 Shelf V² Modular PC is default while V² has only one Shelf
1 Board Plan Plan is one of 9 Boards in the Shelf of the V² Modular PC
2 Book [^Book] System The Book contains all Articles to V² Plan System
3 Article V² Plan Reference V² Plan System is explained in 9 Articles
4 ToC Table of Contents Linked List of each Heading 1 of the Article

[^Book]: Collection of Articles

5 Level Navigation Example

Level Name Menu Item Notes
0 Shelf V² Modular PC is default while V² has only one Shelf
1 Board Products Products is one of 9 Boards in the Shelf of the V² Modular PC
2 Book [^Book] ViPC Each Product Family is grouped in a Book
3 Article Collection ViPC 750 Each Product is a group of Articles
4 Article Features Each Article is one Product Page, e.g. Specs, ...
5 ToC Fluid Form Factor Each Heading 1 of the Article

Illustration of Library Metaphor

LukasChen commented 8 years ago

Read and agree :ok:

VillageHubertChen commented 8 years ago

List of Things Added

VillageHubertChen commented 8 years ago

All done. Closed.