Mailing-List: contact bloodhound-dev-help@incubator.apache.org; run by ezmlm
Precedence: bulk
Reply-To: bloodhound-dev@incubator.apache.org
Received-SPF: pass (nike.apache.org: domain of olemis@gmail.com designates
 74.125.82.175 as permitted sender)
MIME-Version: 1.0
In-Reply-To: 
 <CAKoya93nxTLQQKuJ5O0xJHz-Gbo08JwXkcZp-ChWfy+CLZyx=w@mail.gmail.com>
References: 
 <CAKoya92DkDVAu4vmp2nYN5JG9oonHnX2DDbCwbui7XA33NS47g@mail.gmail.com>
	<CAGMZAuNx8=BAFooOXc4OZd8yYASZcA4+fRyeMXV1EZJCohZvpg@mail.gmail.com>
	<CAGMZAuMAMqak-68N-Hb7YA-d7vJSu+jT7VCef9fSi+EAbjQFWw@mail.gmail.com>
	<CAKoya93nxTLQQKuJ5O0xJHz-Gbo08JwXkcZp-ChWfy+CLZyx=w@mail.gmail.com>
Date: Fri, 3 Feb 2012 13:23:09 -0500
Message-ID: 
 <CAGMZAuPAFBxdTwKYGSvMDxBVMM_RkodQw-C3oPLz1g_+ADh6cw@mail.gmail.com>
Subject: Re: Bloodhound UI basics
From: Olemis Lang <olemis@gmail.com>
To: bloodhound-dev@incubator.apache.org
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: quoted-printable

On Fri, Feb 3, 2012 at 8:11 AM, Joachim Dreimann
<joachim.dreimann@wandisco.com> wrote:
>
> > [...]
> > ... so please let's focus on these screenshots [4]_ [5]_ so as to
> > compare them with the idea sketched in previous wireframe (link above
> > ;) . afaics changes needed=C2=A0(top-down taking wireframe as a referen=
ce
> > ;)=C2=A0are the following :
> >
> > 1- Remove project name + description ? Or that part was just skipped ?
>
> I'm not sure where this was shown previously?

oh ! sorry . I apologize . I thought I had mentioned this before in
this thread [1]_ but maybe I forgot .

Fact is that in Trac=3D0.11 default template includes project name +
description in header .
I paid attention to 0.13 and it seems those fields are not in there
anymore (I could only see them in title and open search link
definition) .
:-/

So I was asking if those fields should be visible like in 0.11 (and
screenshots ;) or hidden like in 0.13 just to confirm what should be
done ;)
It's possible to include show / hide option as well ... so ,
everything is possible .

> Maybe the idea is a bit more clear when it includes what it would look
> like once in full flow, with multiple projects set up, etc:
> http://dl.dropbox.com/u/59840506/Bloodhound/Mockups/tickets_dashboard.png
>
> I haven't sent this before as I'm not sure yet if the lift of projects
> should be above or below the list of tickets for example..


IMO , in the=C2=A0not-so-immediate=C2=A0term (and multi-project support is =
also
not-so-immediate=C2=A0feature) dashboard should be configurable by the user
. I think of it looking like Blogger layout editor or iGoogle . Users
have a bunch of widgets to choose from , select some , arrange them
the way they want ... save , and that should be displayed every time
he/she accesses the site . So IMO there should be both an admin panel
(site-specific default dashboard) for this and a preferences panel (so
that each user may be able to change it if they want ... ok , ok ,
permissions matter ;) .

... maybe I'm thinking way long into the future ...

> But I may
> as well post it for discussion. I would personally say that testing
> the alternatives is the only way to get a good answer to this.
>

;)

>
> > 2- Keep only login / logout items in metanav + a drop down menu
> > =C2=A0=C2=A0 =C2=A0displaying the rest (i.e. Settings) .
> > =C2=A0=C2=A0 =C2=A0I think It's necessary to mention up to this point
> > =C2=A0=C2=A0 =C2=A0that (IMO) metanav !=3D settings . AFAICS preference=
s (one item in
> > =C2=A0=C2=A0 =C2=A0metanav ;) =E2=89=83 settings ;) ; hence clarificati=
on needed
> > =C2=A0=C2=A0 =C2=A0btw metanav in screenshots was based on GMail look a=
nd feel .
> > =C2=A0=C2=A0 =C2=A0* Is it ok ?
> > =C2=A0=C2=A0 =C2=A0* Should I keep it high like in screenshots or close=
r to
> > =C2=A0=C2=A0 =C2=A0 =C2=A0the metanav ?
>
> What's called settings in the mockup can be changed to preferences,
> that's not a problem.


ok . In Trac the specific label to navigate to preferences section is
defined by `trac.prefs.web_ui.PreferencesModule` . This module may be
enabled or not , so the link should be visible by default , but maybe
not . So, as far as the theme is concerned , it should only filter
what metanav links will be displayed . I've done something like that
before for TracMacTheme [3]_ . In there [4]_ it's possible to have
only login / logout links (this also include other third-party metanav
items like `Open ID login` ) + `preferences` . All other metanavs may
be included in a separate drop-down menu to control horizontal
overflow , but there's an option in trac.ini so as to control which
ones are visible and which ones will be included in the drop down menu
.

this is mostly jftr
;)

> In terms of that being a dropdown, GMail actually only gives you
> display density settings to choose, then just links to the actual
> settings page.
>
> I think we'll be fine making settings/preferences link
> straight to the appropriate page for now.
>

ok . But considering the fact that Trac behaves different than GMail
... in the sense that metanav contributors in=C2=A0plugins=C2=A0may add=C2=
=A0further
links=C2=A0(e.g. RPC API -lists RPC features supported by the environment-
, Developer tools -quick access to Trac developer tools for debug- ,
... ) I wonder where =C2=A0they=C2=A0will=C2=A0be included in the user inte=
rface ,
... or maybe they won't be included at all. As you can see I'm
thinking about how to cope with the flexibility provided by Trac at
present, not just focusing on the =C2=ABdefault=C2=BB appearance of the sit=
e
(which is what you sketched in wireframes and I'll stick to that ;) .
Or maybe the decision is to remove those extension points .

>
> > 3- Move search + quick create ticket button to the left
>
> Yes :) This is mainly because they are the main navigational elements
> and most content that people frequently interact with will also be
> close to the top / left area, that minimises the distance you'd have
> to travel from navigation to content.
>

+1
:)

>
> > 4- Suggestion : In search box add a drop down menu looking
> > =C2=A0=C2=A0 =C2=A0like an icon=C2=A0so that users will be able to sele=
ct the filter(s)
> > =C2=A0=C2=A0 =C2=A0they'll use to search=C2=A0for the information they =
want
> > =C2=A0=C2=A0 =C2=A0(i.e. make that magic happen when clicking on search
> > =C2=A0=C2=A0 =C2=A0icon inside search box)
>
> The way GMail makes filters accessible from within the search box is
> very good.


hmmm ... that's a good one ...
;)
I was thinking of something like what's shown in this image [5]_ .
Google search box in top-right corner should also provides a drop down
menu to select Wikipedia , Bing , ... In this case drop down menu
should contain search filters (e.g. =C2=A0Changesets , Milestones , Tickets
, Wiki, ...) . Search button just like in your wireframes .

>
> I do think the Search button to the right of the box is
> needed as well


+1
[...]

>
> > 5- Use tabs for mainnav rather than the menu ?
> > =C2=A0=C2=A0 =C2=A0If this is the case how submenus (customizable using
> > =C2=A0=C2=A0 =C2=A0plugins) will look like ?
>
> Submenus would queue items to the right of where it says Reports in
> the top right corner, up until 3/4 plugins are shown, then provide a
> "More" dropdown with the rest. I'm happy to provide a mockup for this
> later / Monday if that sentence doesn't make sense :)
>

when I mentioned sub menus I was thinking of something like this [5]_
. I'm not sure about whether we are talking about the same thing ...

>
>
> > 6- Add a tabs carousel (just like shown in screenshots). This
> > =C2=A0=C2=A0 =C2=A0one should be a MUST due to the fact that overflow i=
n
> > =C2=A0=C2=A0 =C2=A0metanav MUST be controlled . This might happen due t=
o :
> > =C2=A0=C2=A0 =C2=A0* small screen dimensions
> > =C2=A0=C2=A0 =C2=A0*=C2=A0small windows size (maybe even if it's resize=
d after
> > =C2=A0=C2=A0 =C2=A0 =C2=A0web page is=C2=A0rendered)
>
> By carousel, do you mean what's displayed with the buttons where the
> mouse hovers in this image?
> https://plus.google.com/photos/118444449354330048631/albums/5704585989523=
271585/5704588538735269650
>

I've done this before so ... better see it in action [2]_ ;)

>
> In that case I have to say I'm strongly against the carousel. As a
> method of dealing with 'overspill', ie too many items, this can work
> in media / product libraries where you essentially discover options,
> often serendipitously. Here it could lead to major navigational items
> to not be visible, because they were first in the list and the user
> has scrolled too far right. When that happens the next step would
> always be frustration.
>
> A dropdown called 'More' if plugins where already listed next to the
> navigation once a certain number of items is reached, or better a
> Plugin dropdown that contains all of them, is a better solution from a
> usability perspective.
>

that's similar to what I'd mentioned for TracMacTheme [4]_ .
I think I agree with you .
In there there's a =C2=ABStart=C2=BB button (like in many OS such as Mac OS=
 X ;)
that displays a drop down menu containing mainnav items .

>
> > 7- Add breadcumbs nav in top-left corner
>
> Yes, within the tabbed area, because this isn't shared between the
> tabbed things, and can stay persistent within each tab.
>

;)

>
> > 8- Insert ctxtnav menu in top-right corner (instead of previous tabs)
>
> I'm not sure what you mean by this.. context nav, as in Ticket/Wiki/Sourc=
e?
>

Context navigation items in this page [6]_ are `Start Page` , `Index`
, `History`
;)
In your wireframe it is a bit confusing to me whether they are `Custom
Query` , `Reports` (to the right under tabs) or `My Tickets` ,=C2=A0`Custom
Query` , `Reports` close to Dashboard label / title

>
> > 9- Activity column won't be part of the theme ... unless stated otherwi=
se
>
> I understood your first reply to this thread as saying that it would
> have to be part of the theme?
>

... well , my reply was a bit dense I guess ... even for myself now
that I read it once again
:-/
summarizing my conclusion is that there are 3 or 4 ways to get this
done , and I have no strong arguments (so far) to decide which one
will be the right one . So IMO we still need to polish the diamond so
as to make it shine ;)

> > 10- Modify footer
>
> I haven't put much thought into the footer yet, its seems fine the way
> it is currently.
>

well ... I already changed the footer [7]_ :P
the text to the right may be configured in trac.ini , text to the left is f=
ixed
;)

> > 11- Add support to customize theme colors . This is a built-in feature =
of
> > =C2=A0=C2=A0 ThemeEnginePlugin btw , so ... no big deal .
>
> Not sure this is an important function. I would not implement this
> unless users ask for it. I think we should just go with the Bootstrap
> defaults for now. We don't have to use every feature that is available
> straightaway :)
>

ok , later we shall see ;)

>
> >
> > Please I'd appreciate if you could review the TODO list above and cmiiw
> >
> > [...]
> >
> > General considerations used to build the theme :
> >
> > 1- control scrolling using a div inside the web page
> > =C2=A0=C2=A0 =C2=A0(<=3D therefore nav items are always at hand ;)
> > 2- make it work for 640 x 400 resolution [2]_ [3]_
> > =C2=A0=C2=A0 =C2=A0(this one was taken before starting this thread ;)
>
> Which devices to you envisage with such a low resolution?

Hmmm ... I was thinking more about e.g. myself using my notebook and
arranging some windows using tile / cascade commands . They'll be
distributed side by side considering available space . IOW , I was
assuming that you might render the website inside a window (not full
screen) . I played with the GMail thingy (once again ;) and it seems
this is similar to what they do as well ;)

>
> I can only
> think of phones/tablets, where actual size is much more important than
> resolution - as an example when the resolution was doubled with retina
> displays in iphones, buttons stayed the same size because the critical
> thing here is actually the size of your finger, not the pixels.
>

yes , u r right . Sorry but I don't use these terms consistently . It
was hard for me to pass web design test in college ... ;)

> > PS: For further screenshots (at different points in development
> > process) the whole album [1]_ should be publicly available . I hope
> > you all can see it .
>
> Yes, I can see them..

:)

>
> We should try to get them into the Bloodhound
> SVN system as soon as possible though, rather them host them
> externally.
>

... something I cannot do ... at present ...
:'(

.. [1]=C2=A0Bloodhound Theme/Dashboard design
=C2=A0=C2=A0 =C2=A0 =C2=A0 =C2=A0(http://mail-archives.apache.org/mod_mbox/=
incubator-bloodhound-dev/201201.mbox/%3c4F15D1DE.7080009@wandisco.com%3e)

.. [2]=C2=A01499390 - Menu carousel
=C2=A0=C2=A0 =C2=A0 =C2=A0 =C2=A0(http://www.youtube.com/playlist?list=3DPL=
42CCE0831D836673&feature=3Dplcp)

.. [3] MacTheme @ trac-hacks
=C2=A0=C2=A0 =C2=A0 =C2=A0 =C2=A0(http://trac-hacks.org/wiki/MacTheme)

.. [4]=C2=A0Mac OS theme - screenshot
=C2=A0=C2=A0 =C2=A0 =C2=A0 =C2=A0(http://bitbucket.org/olemis/trac-macos/ra=
w/tip/tracmacos/htdocs/screenshot.png)

.. [5]=C2=A0Hierarchical navigation menus
=C2=A0=C2=A0 =C2=A0 =C2=A0 =C2=A0(http://trac-hacks.org/attachment/wiki/Men=
usPlugin/menusplugin.png)

.. [6] Welcome to Apache Bloodhound (incubating)
        (https://issues.apache.org/bloodhound)

.. [7] New footer ...
        (https://lh5.googleusercontent.com/-Z7u67GIJ5x4/TyscjOsN8DI/AAAAAAA=
AAZ4/3v7_52KdooQ/w343-h155-n-k/BH_theme_13.png)

--
Regards,

Olemis

Facebook =3D>=C2=A0http://www.facebook.com/olemis
Twitter =3D>=C2=A0http://www.twitter.com/olemislc=C2=A0(@olemislc)
Blog ES =3D> http://simelo-es.blogspot.com
Blog EN =3D> http://simelo-en.blogspot.com
Quora =3D>=C2=A0http://www.quora.com/olemis
Youtube =3D> http://youtube.com/user/greatsoftw

Featured article : Identificando n=C3=BAmeros primos con expresi=C3=B3n reg=
ular en Perl
http://feedproxy.google.com/~r/simelo-news/~3/BHr859OSndo/identificando-num=
eros-primos-con.html
Tweet: yo no puedo creer q haya pasado inadvertido el 1/2/12 12:12 ...
@elainediaz2003 no dijo na' ... OMG ! ... much more coming soon ;) #fb
Follow @olemislc Reply Retweet =C2=A0=C2=A012:59 Feb-01
=C2=A0=C2=A0Get this email app!
Get a signature like this. CLICK HERE.