[LogiLogi-list] User Interfase Proposal A

I've been working over the UI_proposal_A.svg. Here is some
explanation/justification of my changes and other stuff:

= Overview
Well, in general I tried to apply some ideas I've previously mention.
This is not finished yet as you will notice, and I'm sharing it so we
can work it together if you all like. I'd really would like to work
all together to end up with a better interface for Logilogi.

All of this is my personal view of a better logilogi, and all are
proposals, just that, and some of them are radical and experimental
that should be tested to prove they work in case we all agree to use
them.

Also as this is not finished, there are obvious bits left, like the
sidebars that where not changed much (apart from some styling). I've
focused mostly on the headers, tried to define estyles that would work
site-wide, "clean-up" the logi space, enfasize the peer-group
perspective and your power (as one of the most important parts of LL),
the rating and also the "new logi" action, as to promote people to
rate.

Last but not least, this is a scratch and it's not perfect in the
aspects of positions, margins, separations, sizes (although I've paid
most attention to them), etc. Colors for example are proposed but not
definitive as I need some testing still.

= Colors
Well, I've done lot's of color schemes test. I end up with blue, like
in many web apps we see arround and also many desktop software, and
that's because blue works very good on screen. Also I've also been
attracted to blue links (like default) and that makes blue a good
companion.

= Fonts
I've used font families and sizes but just as example to work over the
layout and other concepts, but the definitive styles will take another
approach, and I prefer working them right from the CSS, although they
might end up looking similar to what they are now, but not the same.
For example, the logi text would work better on a browser, somehow
inkscape ads a little bold.

= Header
I've made many tests of color schemes, sizes, shapes, etc, and I've
found that a heavy header helps the rest of the structure, so that's
why the heavy-dark-blue header.

= Navigation bar - too many tags
I always tend to be minimalistic, and since some time I've been
thinking of a very minimalistic interfase for LL, which would consist
of only one search box where everything would happen, suggestion,
dynamic tag coloring (assigning content and context as typing), and
also very ajaxyfied. So that would be some radical approach. In this
case, we would be repeating tags only two times if we count the URL
bar as our first input.

Now at LL we've got tags repeated 3 times only at the navigation bar.
I do understand why they are and I also think they are necessary now,
but we should keep it in mind.

The other thing I see problematic about the tags is it's order for
context and content, which is wrote 2 times each way, and I think it's
confusing. We've discussed a lot about this [0]. I think we should go
either way, but not mix them. I still fill query way more intuitive.

So, I did some changes.

I wrote "requested" (like old times) but still not sure what's the
best, maybe it's searched for:, don't know.

I kind of merged the current "search" and "searched for" bar into one,
and split the search in two, which I think will help users to
understand what they are doing. It's an easy and effective way I
believe, still have to test it.

= Main menu
I think "activity" is a more descriptive name for what I imagine will
have that section, since we will have logi-changes, last remarks,
comments, etc... what do you think?

Also we could use a bit more wording for "tags", I don't know what,
but we need to make clear that there you will find all logis...

= Logi toolbar
I've give a try to this new approach. All logi-related actions to the
bottom, and this was because when you finish reading a logi is when
you want to use this tools, but also becouse they disturb most of the
time since they are not used, but this is just a proposed idea.

= Icons
I started to do some approaches to icons. I tested a linking-icon at
the searched tags showing one-to-many, they are very communicative and
explanatory, I'd like to use more of this. I actually used them on
first approaches but then I didn't add them again, and now I just
placed them to see what you all think, but I'm not sure if they are so
explanatory.
I also made a simple "logi" icon... I could start building other
icons, but first the general aesthetic should be defined, in case it
changes from what is now.

= Links
Right now you see links not underlined, but I pretend to test later
how underline works as I think is the best approach. Inkscape don't
has underline style for text so I didn't do it at first. In HTML is
easier to test if it works or not.

= Buttons
I've defined a standard button style, grey background and link in
blue, which works for buttons and select boxes, but this is just a
test, as select boxes should probably still be default styled for a
while, later we could do a javascript+css dropdown, which are nice.
Also, I've made an exception of button for the "create new logi" as to
enfasize it, and play with the association of blue with the logi.

= Overbox
I've been thinking for a while about a logi-centered design, for which
I mean that most things happen within the logi (marking, commenting,
editing). Also now while using it, I realized the overbox for editing
anything is very annoying and obstructive. My proposal is to not use
any more over boxes for any kind of edition, and use them (or popovers
like logilinks) just for showing any static information. Also popups
are very confusing for most people I think.

By now, we could some-how fix the overbox problems by changing the
transparent background by a solid white background (which I also think
is nicer), and I would also suggest not closing it when clicking
outside the box, and just do it when clicking the close cross or
cancel, submit, etc.

= Logi centered design
I've been thinking of ways to start doing a logi centered design and
interaction, which means that we could select text from the logi and
comment right there without leaving (or poping) to another page/logi,
and modifying settings right there, maybe with a shrinking box that
appears, all without loosing focus on the logi. For this Wybo already
explained the difficulties, so I've been thinking how to solve them.

I've been thinking that we could print the logi without links and
remarks and add them dynamically through javascript, and only when
needed. This way we could have always a plain text (or just basic
tags) so we might have more control over the logi... You might already
though about this and maybe it's just too difficult to do, but I see
it would be a start for the next interactive LL :)

= People lost on logilogi
Although for us it might be obvious, still people is getting lost in
Logilogi (the current public beta), although now everybody has
understood much more than before (previous UI). People would say to me
"I've searched for Idealims (or anything) and nothing appears", and
this express what people hopes to find, and for this we need to
improve the frontpage (as the new one will certainly do), and make all
sections more expresive, that is certainly the next step. This would
take another mail so we can talk about each part closely.

= Next steps
Next I'll be working on the sidebars, their content and style. Right
now, for example, My Settings has duplicated options for peergroup as
they are on the header now too.

= Old list mails
While researching about the previous tagging discussion, I found the
first mails I wrote to the list, and I realized that right now we are
doing what we where talking two years ago we would do, and just before
reading this I made my first logi about the first "thoughts" I talked
Wybo about, in our first conversation on the list... things are going
just fine :)

Well, I think that was enough, looking forward the critics.

Greetings!

[0] http://sourceforge.net/mailarchive/forum.php?thread_name=20070704201750.GA30673%40logilogi.org&forum_name=logilogi-list

-- 
Bruno