incubator-bloodhound-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Olemis Lang <ole...@gmail.com>
Subject Re: Bloodhound UI basics
Date Fri, 03 Feb 2012 18:23:09 GMT
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 (top-down taking wireframe as a reference
> > ;) are 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=0.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 not-so-immediate term (and multi-project support is also
not-so-immediate feature) 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
> >     displaying the rest (i.e. Settings) .
> >     I think It's necessary to mention up to this point
> >     that (IMO) metanav != settings . AFAICS preferences (one item in
> >     metanav ;) ≃ settings ;) ; hence clarification needed
> >     btw metanav in screenshots was based on GMail look and feel .
> >     * Is it ok ?
> >     * Should I keep it high like in screenshots or closer to
> >       the 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 plugins may add further
links (e.g. RPC API -lists RPC features supported by the environment-
, Developer tools -quick access to Trac developer tools for debug- ,
... ) I wonder where  they will be included in the user interface ,
... 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 «default» appearance of the site
(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
> >     like an icon so that users will be able to select the filter(s)
> >     they'll use to search for the information they want
> >     (i.e. make that magic happen when clicking on search
> >     icon 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.  Changesets , 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 ?
> >     If this is the case how submenus (customizable using
> >     plugins) 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
> >     one should be a MUST due to the fact that overflow in
> >     metanav MUST be controlled . This might happen due to :
> >     * small screen dimensions
> >     * small windows size (maybe even if it's resized after
> >       web page is rendered)
>
> 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/5704585989523271585/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 «Start» 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/Source?
>

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` , `Custom
Query` , `Reports` close to Dashboard label / title

>
> > 9- Activity column won't be part of the theme ... unless stated otherwise
>
> 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 fixed
;)

> > 11- Add support to customize theme colors . This is a built-in feature of
> >    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
> >     (<= therefore nav items are always at hand ;)
> > 2- make it work for 640 x 400 resolution [2]_ [3]_
> >     (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] Bloodhound Theme/Dashboard design
        (http://mail-archives.apache.org/mod_mbox/incubator-bloodhound-dev/201201.mbox/%3c4F15D1DE.7080009@wandisco.com%3e)

.. [2] 1499390 - Menu carousel
        (http://www.youtube.com/playlist?list=PL42CCE0831D836673&feature=plcp)

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

.. [4] Mac OS theme - screenshot
        (http://bitbucket.org/olemis/trac-macos/raw/tip/tracmacos/htdocs/screenshot.png)

.. [5] Hierarchical navigation menus
        (http://trac-hacks.org/attachment/wiki/MenusPlugin/menusplugin.png)

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

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

--
Regards,

Olemis

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

Featured article : Identificando números primos con expresión regular en Perl
http://feedproxy.google.com/~r/simelo-news/~3/BHr859OSndo/identificando-numeros-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   12:59 Feb-01
  Get this email app!
Get a signature like this. CLICK HERE.

Mime
View raw message