[dev] New UI Design

[Gloves (Jesse Padilla)]

********************************
*** New UI Design in Detail. ***
********************************
[I apologize for it's length of the email & my delay.]

Replying to:
 > http://marc.theaimsgroup.com/?l=horde-dev&m=104554268313391&w=2
 >> http://marc.theaimsgroup.com/?l=horde-dev&m=104551803122365&w=2

Reference pictures/links:
+ Horde UI – Email
http://www.jessebox.com/downloads/185.png

+ PluginBox UI – Email
http://www.jessebox.com/downloads/187.png

+ PluginBox UI 2 – Email
http://www.jessebox.com/downloads/187.png

+ Netscape UI – Email
http://www.jessebox.com/downloads/184.png

+  Outlook Express UI - Email
http://www.jessebox.com/downloads/186.png


First, I am amazed at your review and will try to explain in detail how 
this new design can help bring this suite of web applications to 
hundreds of millions of users across the world.  You can't finish a 
puzzle without every piece but you can tell what it's supposed to be a 
picture of.

[Tell me if I miss a subject or point that I should have explained.]

*Good Design/Good UI Design (in a nutshell-if possible)*
In design school you learn the principles of design.  These are rules 
that should never be broken in design.  These are rules that only fine 
artists may break because they may not be concerned with their viewers. 
  Some of the rules have to do with contrast, color themes, space, hue, 
lines, typography and composition.  These rules can be written down for 
anyone to follow.  If they apply all of these rules and don't break any, 
they WILL have a good design.

In a good design the viewer will be attracted to the design and their 
eye will immediately be taken to a specific point and lead around the 
design to other specific points without leaving the composition.  This 
should flow easily.  If this doesn't happen space tends to  look 
cluttered and the viewer is quickly discouraged.  There are simple 
techniques that can be used to achieve this; empty space, varied sizes 
for important/less important objects, use of color and lines to hold the 
composition together and help organize and guide the eye. [Guiding the 
eye example: http://www.paperandinkprinting.com/]

An easy way to help tell when these rules are applied to UI designs, it 
will be easy to navigate with a mouse without large amounts of movement.

Example1:
[See Horde UI – Email] Moving your mouse from the bottom frame to the 
top options and then to the far right hand side of the screen to scroll 
the bar.  Your mouse had just traveled in the largest triangle pattern 
possible on the screen.  Not good for saving time, finding relating 
links and usability.  Honestly, the first time I clicked around in 
Horde, I clicked on a new module and didn't realize the page finished 
loading the new module because my eye wasn't lead to the new focal 
point, it was left at the bottom.

Example2:
(Note: If it is decided for me to help, there will be Many changes to 
this UI, described later to better fit this much larger scale & global 
project.)

[See PluginBox UI – Email] Notice how there are 3 different sized Icons. 
  Notice 3 different sized main frames with 3 different colors.  All 
together there are 5 frames (the gray bar is a frame, doesn't have to be 
– up to programmers.)  In graphic design and commercial illustration, 3, 
5 & 7 are magic numbers for the eye.  Notice the 3 main frames.  On the 
far left you have the services/modules when clicked on this quickly 
loads the middle frame that happens to be right next to the modules 
frame with the Preferences/Tools and options.  This also loads the 3rd 
frame that happens to be right next to the Preferences/Tools frame. The 
3rd frame is the largest frame and only lists the most important 
information.  I believe in a perfect UI and application design, my mom 
could log into this email service and immediately figure out how to 
check her email and compose a new message in less than 2 minuets (Trust 
me, that's a difficult job for her, a long time AOL user).  The most 
important functions in an email program are not “Compose, folders, 
options, search, problem, filter rules, apply filters, help and logout.” 
  I know for a fact my mom will be asking me, “How do I send a message? 
  Where do I go? Jesse your email program sucks!” She has told me that 
with my currently running design that I designed 4 years ago. Also, 
notice how there are 3 places at all times she can click to compose a 
message and it still didn't work. [See PluginBox UI 2 – Email]
The perfect UI would have all the options for more advanced users and 
still have the most basic and necessary features of a particular module 
very easy to find and use without having to sort thought a large list of 
links.


*Web application not a OS application*
I think I have worded my comment incorrectly:

 >> + UI Designed like an OS application not a web application.

 > My problem with this is that it *is* a web application.
 > Useability is one thing, but trying to be something you
 > aren't is another.

I also think your statement is incorrect to a point.  It's not designed 
to be something it's not, as much as it is designed to be something that 
is familiar.  I don't know the percentages here but I think that 80% of 
the population uses POP3 client software.  Outlook Express, Netscape, 
Eudora etc.  All of those have similar UI designs. [See Netscape UI – 
Email & Outlook Express UI – Email]

Notice how those programs are divided into sections somewhat similar to 
PluginBox UI – Email's design.  If you were to add a Calendar, 
Bookmarks, Address Book, Memos, Tasks, Online Files and other modules 
the best place to put it would be Above where the program functions are 
located and move those functions down or to move the folders & the Quick 
Address book to the right a little and list the themes to the left.


*Function & Features Galore!!!*
I am all for features, functions and near total customization of the 
horde web application suite for the moderate to advanced power users. 
This however, needs to be moved out of the way from being distracting to 
the eye.  I find the amount of features you have packed into Horde 
fantastic. - blows my mind.  Every day I mess with a few more of them.


*Making the Design Work with Horde*
 > one more *huge* problem is that you put text
 > into some of your graphics. Horde is an entirely
 > internationalized suite; graphics with text break
 > that *badly*.

Very good point, I had forgot about the number of languages that you 
support off the bat and the number that will be added to it in the 
future. When I designed this UI it was for the US only and not outside 
countries.  I will redesign the Icons to fit the text under them or even 
over them if not too complex.  We are only 2 people on our spare time, 
not an army of experienced programmers like the Horde community. /=D <-- 
I don't know how you guys did it. /=D

I would most defiantly make new icons for many/all of the current 
modules. I will also create Illustrator, Photoshop templates and 
guidelines for anyone who would like to create their new icons for a new 
module on this theme.


*Frames*
 >> - Many people don't like frames. (This may be due to
 >> bad browser compatibility experiences in the 90s? Other
 >> than that, I can't think of any other reason.)

 > People using text browsers, people using entirely keyboard
 > navigation (where's the cursor focus?), people using
 > voice-controlled/reading browsers, etc...

A few more reasons why people don't like frames:
- Don't like the hidden URLs for linking.
- Don't like that they are often displayed wrong on different platforms 
(apple) when written poorly.
- Someone told me the page loads funny (I haven't noticed that.)
- Can get into legal issues when linking to other sites inside of a frame.

Many of these negatives don't really apply to an email site, or if they 
do are easily worked around by opening new windows or targeting _top.

 >> + Less stress & faster loading times for client side.
 >> (Only have to download small parts of the page instead
 >> of the whole page at a time.)

 > Why/how/explain/back this up.
Let's say all together (5 files + Images) that PluginBox UI – Email site 
equals to 120KB (16KB w/cached images.)  In a non-frame situation every 
time a user clicks a link or refreshes a page all 16KB is downloaded 
when only a one part of the screen needed redownloading.  With the 
frames you will be downloading half or sometimes less than half of that 
16KB.  This also saves on the server side too, the server doesn't have 
to run through all of the scrips every time, only part of the scrips 
when a new page is loaded.
When you have a content heavy non-frame page, or a large image displayed 
in a non-frame page on a not so quick computer, scrolling can REALLY 
take a toll on processing and easy of use of browsing a page.  When the 
web site is split into smaller pieces the poor graphics processor isn't 
having to recalculate 100% of the graphics all of the time and scrolls 
more smoothly.  Same with loading images, decoding many jpeg, gif or png 
files, even small ones will slow your computer down.  I notice huge 
differences especially when many applications are using my memory and 
processing already.  If the computer doesn't have to reopen all of the 
images that saves time and client side resources making the experience 
faster and smoother.

 > People using text browsers,
Should have a different email site altogether. /=D Actually I have never 
used a text browser and am not sure how they work, so no comment.

 > people using entirely keyboard navigation
I often times sit back in my chair with only my keyboard on my lap and 
surf the net.  Famed sites are no more difficult to navigate through 
than non-frames sites.  In all modern browsers the current frame is 
highlighted when Tabing around.

 > people using voice-controlled/reading browsers, etc...
Can't comment on that but I'm not sure why it would be much more 
difficult.  Again, no comment.

Because there is always a possibility that people don't see things the 
way I do, /=D  We can easily design a simple frame work that has just a 
few very simple functions to include all the same files that would be in 
a frame situation to be included into 1 solid HTML/PHP file. Thus giving 
the user 100% control over Frames/Nonframes versions.


*Unlimited Modules*
There is always a limit.  Everyone knows that.  I imagine that 30+ 
modules is on the high side and that 90% of the users might not have 
installed that may. However if they did install and were using 30+ 
modules there should be an option to remove the large images above the 
module names to reduce the vertical scrolling.

Also, currently your bottom frame on the Horde suite is no-scroll.  So 
if i added 100 modules to it currently there is no way for me to get to 
some of them.


*Extra ideas to help this get off the ground*
 >> - Existing users will have to relearn the New UI.
 >> However it shouldnen't be difficult at all.

 > I find that a bit hard to believe, really.
I'm willing to place money down on times that an existing user will take 
to find the same features and functions on this new UI.  However this 
isn't about betting.  With all revisions of products and software, some 
getting used to is mandatory.  Re-learning the UI... ya, it will be 
difficult for some but all the same parts that they remember will be 
there in easy to find, categorized and in a fluid design.

 > I like some parts of it, but some parts of it just
 > seem inconsistent. You waste a ton of space across
 > the top for anyone not looking for banner ads,
 > for example.
I'm not exactly sure what specific group you are trying to develop this 
software for. <-- (may be a promotional problem.)  Maybe for non-profit 
organizations only?  When I first started designing the PluginBox UI, It 
was originally designed for corporations to use, change the colors, add 
their company logo on the top left.  Now it can be used for profit 
organizations to put an ad at the top if they want to annoy their users, 
I'm not responsible for how people use this software.  The blank space 
at the top was intended to be a place to give the eye rest.  By filling 
in that last bit of free space in the composition you almost 
automatically make the design crowded. <-- If you don't get what I'm 
saying I'll try to explain it more if you want.

Also, there needs to at least be enough room for a largely horizontal 
Logo design to be fitted.  There are also a few other things you can add 
to fill the space and make use of.  Add a date-timestamp, overall disk 
quota, quick launch to inbox by listing number of new emails.  Get 
creative, or even leave it blank.  It makes the design look clean when 
you have space left over.  I know programmers (and even I) like to stuff 
designs full of features and information but that can actually have a 
negative effect. /=(

Example of bad design clients made me do: http://www.go2gts.com/index2.html
where do you look?  So much crap!  Client's aren't the designers, they 
didn't go to school but they pay me the $$$ so I have to listen to them. /=(

*Closing*
The current Horde UI, I would give it a 7.6 or a C.  Meaning it gets the 
job done and isn't bad at all but won't wow the common computer user 
with it's looks and UI.  I would really like to help with that area. 
I'm going for an A to A+ UI.


*Please Help Me*
I have never contributed to an open source project especially one of 
this popularity. I would like it if I could find someone to talk 
to/email that would help me. (doesn't easily get frustrated with dumb 
questions) Once you guys have decided weather or not to use this design 
that is.

Again, I apologize for the long letter and if it doesn't make since, I 
wrote this at 4am.  If nothing else, I hope to have taught you something 
about design.

-- 
Gloves Q. /=D
jesse at pluginbox.com