WireframesViewScreen

Update: I've refactored this topic to be more of a specification document with screenshots of the latest mock ups and accompanying documentation of planned features. It now contains the latest mock ups only. The design studies and the discussions related to the visual design have been moved to DesignStudiesForNewSkin.

-- CarloSchulz - 10 Jan 2010

Overall Goals

• facilitate workflows (see RethinkingTopicInteraction)
• reduce the number of screen changes required to perform an action like attach for instance
• allow beginners to move faster from being a beginner to being an intermediate user
• Do not limit power users
• reduce the mouse movements required to perform a certain action
• allow horizontal (like on foswiki.org) and side bar navigation (like in current pattern skin)
• a much better user experience

Background

On RethinkingTopicInteraction and RethinkingTopicInteractionPrototype the UserExperienceTaskTeam discussed and defined a new concept for a more user friendly and workflow orientated way of interacting with topics. This topic documents the specific screen structure and states in more detail.

Mock up / wireframe for view screen

Just sketches by now so we can avoid the discussion about colors, paddings and stuff . See DesignStudiesForNewSkin for something more colorful.

...and the same style just with a newly created topic:

-- CarloSchulz - 06 Jan 2010

Specification of view screen components

Discussion

I needed a bit more structure to better assess what I've mocked up already and what is still missing.

Most remarks are integrated in above documentation or have been moved to DesignStudiesForNewSkin..

-- CarloSchulz - 10 Jan 2010

Don't forget the "change form" state.

-- MichaelDaum - 11 Jan 2010

Btw found this write up: The case against vertical navigation.

• Interesting that this article is on a website which is designed exactly the way I hate websites. I love my left bar, and looking at how it is used and tailored in practical use, it actually works well in a wiki context. It is wrong to just dismiss it like this. The horizontal navigation bar suggested in these wireframes is nice and the right way to go. But that should not prevent ALSO having a left bar that can be added per web basis and be used actively. And for sites with many webs it is a hard to live without. It is a pain having to use a pulldown to navigate from web to web. For single purpose wikis you do not have the same need for a side bar. -- KennethLavrsen - 22 Jan 2010

-- MichaelDaum - 11 Jan 2010

On customizing the horiz. navigation: how about making it a "my webs" feature similar to the "my workplaces" concept of 03spaces.

-- MichaelDaum - 11 Jan 2010

I added the empty states of the tabbed meta data box plus an empty view screen.

-- CarloSchulz - 20 Jan 2010

Have been watching quietly, this is great work!

Thought I might link to something that was brought to my attention by a colleague - http://gomockingbird.com/mockingbird/ - a collaborative UI wireframing thing.

-- PaulHarvey - 22 Jan 2010

Thanks Paul.

WRT mockinbird: I heard of it but never tried it.

Actually, I'm thinking about building the whole thing in HTML using some kind of css framework like http://960.gs or maybe YUI. That way we would have something reuseable and collaborative.

-- CarloSchulz - 22 Jan 2010

YUI is not the fastest, nor the best, but it is handy.

In my experience, YUI will increase the loading time for a topic, just by downloading the .js needed for it to work. Also it is very intrusive.

All in all, i'm not against YUI (we use it in our product). Just wanted to point out some things we found that might affect Foswiki.

-- RafaelAlvarez - 22 Jan 2010

Commenting is disabled while not logged in