[dev] Interface design Horde 4.1/5.0

[Jan Schneider]

As mentioned earlier (http://wiki.horde.org/ReleaseManagement), we  
plan to work on some redesigning for the next Horde release.

The two major reasons are:
- to regain a more consistent user interface between the different  
applications and the different application modes (Ajax vs. Traditional)
- to modernize the oldfashioned traditional interfaces

This is going to happen in 3 steps:
1. Creating a consistent interface design
2. Creating a new default design/theme
3. Implementing the design changes on the application level

1. has been started during the Horde Hackathon last year, and now  
needs your feedback on the results (more on that below).
2. is done by a professional interface designer, sponsored by Horde LLC.
3. is done by the Horde developers and sponsored by the Horde LLC too,  
with any further contributions through sponsoring or patches welcome.


The general layout that we came up with in ascii art, and attached as  
a simple drawing:

#===========================================================================#
||Top cross-application navigation                               search box||
#===========================================================================#
||+--------+ || +-----------+-------+----------+-------+----+              ||
|||New item| || |Application|actions|that apply|to main|area|              ||
||+--------+ || +-----------+-------+----------+-------+----+              ||
||           ||                                                            ||
||Resources, ||                                                            ||
||Items that ||                                                            ||
||change what||                Main application area,                      ||
||is going   ||                up to the application                       ||
||to be      ||                    to implement.                           ||
||displayed  ||                                                            ||
||in the main||                                                            ||
||application||                                                            ||
||area       ||                                                            ||
#===========================================================================#

The top bar should be familiar from web sites/applications like  
Google. It will replace the current sidebar and is going to be visible  
in all applications, in both traditional and ajax modes. By default it  
will contain links to the installed applications. It's supposed to be  
dynamic, so that it will show the applications groups known from the  
current sidebar, if not all applications fit into the row.
Arrows will hint to expandable sub-menus that open on clicking those  
arrows. Those submenus will either contain the individual applications  
(if displaying application groups in the main menu), or  
application-specific action as known from the sidebar (if displaying  
applications in the main menu). The submenus should be able to display  
arbitrary content, so that they could theoretically contain  
application information (alarm, message counts, etc.) too.
At the right of the top bar there will be some (application-specific)  
search box, if the current application supports searching. In the  
future, this will also allow global searching, once this has has been  
implemented. Further elements that should go here are elements like  
preferences, logout, etc. If necessary those extra items could be  
condensed into a single "user" drop down menu.

The application area is divided vertically, if applicable. The left  
pane contains some outstanding button to create a new element for the  
current application: new message, new event, etc.
Below the "new" button is a list of resources, items, action buttons  
that change *what* is going to be displayed in the right pane. This  
could be folder trees, calendar listings, wiki page names, etc.

The right pane contains the actual application content. The main  
content area is completely up to the application to fill and lay out.  
At a later step we are probably going to standardize layout elements  
for applications too, but for now we concentrate on the application  
"frame". If applicable, the main application area is going to have a  
button bar on the top that contains all actions that apply to the  
content displayed below. This could be further restricting of the  
displayed content (think of views in the calendar, or filters in  
webmail), or doing anything with the content (deletion,  
replying/forwarding mail, etc.)

Hackathon guys, please add or refine anything I missed. And everyboy,  
please give us feedback on this general interface design. Let us know  
if we missed something obvious, or if you see some major flaw in one  
of those ideas. Please don't get into details too much, this is just a  
general wire frame, or layout ruleset.

Jan.

-- 
Do you need professional PHP or Horde consulting?
http://horde.org/consulting/
-------------- next part --------------
A non-text attachment was scrubbed...
Name: InterfaceDesignHorde5.png
Type: image/png
Size: 31704 bytes
Desc: not available
URL: <http://lists.horde.org/archives/dev/attachments/20120109/cb962727/attachment-0001.png>