The Big Picture of V² (Part of V² Home Page)

[VillageHubertChen]

• [x] LC: Research if Accordion is the best way to present the long page content of Pieces of V²Puzzle → Research
• [x] HC: Find Tabs in → Angular-UI-Bootstrap►Tabs
• [x] HC: Update #21 (How the V² Home Page works)
• [x] HC: Read #18
• [x] HC: Read #22 (Add all pieces to the Puzzle)
• [x] HC: Write → Tab Features
• [x] LC: Make Rapid Prototype of Tabs with URL Selection
• [x] LC Read this issue
• [x] LC: Read #18
• [x] LC: Read #21
• [x] LC: Read #39
• [x] LC: Redo the Portfolio Part of Home Page as Tabs. Read content from JSON as before. Use existing Layout
• [x] LC: Adjust URLs in tooltips to work with tabs
• [x] HC, LC: Design and implement new compact Layout → #39

  Research if Accordion is the best way ...

... to present the long page content of The Big Picture of V²

User Story current Accordion Navigation

As a new reader to V² I studied "The Big Picture of V²". It was assuring to see that V² considers all pieces of the puzzle, but personally I am only interested in 3 pieces. I very much like that I can jump to more details of the puzzle piece by clicking the link in the tooltip, but I do not like that in order to find the other two pieces to read that I need to scroll up a very long page and find that Puzzle again. I also feel that it is hard to keep an overview on this long page.

User Story new Navigation

Same Beginning: As a new reader to V² I studied "The Big Picture of V²". It was assuring to see that V² considers all pieces of the puzzle, but personally I am only interested in 3 pieces. I very much like that I can jump to more details of the puzzle piece by clicking the link in the tooltip. Solution to Problem: Thanks to the soft scrolling I realize that the page scrolls down only a little bit and that a tab opens that presents a slide with mode detailed content. In order to go back to the puzzle to find my other pieces to read I just need to scroll up a teeny bit. Thanks to the Puzzle Info-graphics combined with the tabbed slide show I do not loose overview on the content. In fact I find it very structured.

The new Navigation is combining the Puzzle plus Tabbed Slide Show via the links in the Tooltips of the Puzzle.

Added Bonus: If we have time we can add a next and previous slide button and for those who want to read it all it is just hitting the next slide button.

Why tabs + Puzzle is better in this case

• Each reader is interested in maybe 3 of 9 topics. Tabs make it easy to access.
• The Combination of Puzzle plus Tabs makes for less scrolling than Puzzle + Accordion
  • When using Puzzle plus Accordion I always needed long scroll backs to the Puzzle to find my next piece to read. Instead Puzzle plus Tabs is a fast single page flip.

    Hero Pages

• http://www.canon-europe.com/for_home/product_finder/cameras/digital_slr/eos_1300d/
• http://www.sigma-global.com/en/lenses/cas/product/art/a_50_100_18/features.html
  • also check out the sub menu. Maybe great for our Village Tronic site
• http://www.sigma-global.com/en/lenses/cas/product/art/a_24_14/index.html (slide show animation)

  Reference

• nngroup►Interaction Cost
• nngroup►Accordions Are Not Always the Answer ...

  Tab Features

• Each tab fits on a screen without scrolling. Makes each topic like a slide
• Each tab has a URL. So it can be shared and the link in puzzle piece tooltip can link to it
• Click the link in tooltip of puzzle opens corresponding tab
• soft scrolling enables reader to understand connection of Puzzle & Tabs. So after reading the tabe he knows a short scroll up brings him back to the puzzle to find the next piece to read.
• The puzzle is ideal to:
  • Show that we consider all pieces of the puzzle and what each piece is for via Tooltip
  • Reader can identify the pieces he is interested to learn more about and can open the corresponding tab with a single click that opens tab.
• Bonus Feature: Next and Previous Button for Slide Show

[VillageHubertChen]

Feedback from Sascha:

Rename "All pieces of the V² Puzzle" → "The Big Picture of V²"

[VillageHubertChen]

All done. :tada: