Naali UI Mock-up Contest

[Ryan McDougall]

Hello realXtend and Virtual Worlds Community!

Its time for us to call upon your help once again. We are at the stage
are about ready to start designing the user interface for our new
Naali viewer, and we are looking for lots of new, interesting, wild
and creative ideas.

Have you ever thought about how people should interact with their
virtual worlds? Do you have a gift for understanding people, how they
interact with software, or flair for visual presentation? Get a
chuckle out of my pathetic attempt at design:
http://wiki.realxtend.org/index.php/User_Interaction_Working_Group ?

If so then here's your chance to affect the design of a
next-generation virtual world viewer. Simply make some mockups in
Photoshop or GIMP, host them on your local Web server, and e-mail the
entry in reply to this e-mail. If you lack a suitable place on the
Internet to put your entry, e-mail me to let me know I will post your
mockups on our wiki.

So be creative and have fun! All participation welcome!

Should your design be chosen, you'll receive credit on the realXtend
website and all associated documentation, I will shave my head and put
the picture on the Internet, and you will receive a gift certificate
to Oulu, Finland's finest dining establishment (airfare not included).

Best of luck!

[Haylton Bomfim]

Hi friends,
I think the 3D interface display of site http://www.taggalaxy.com is
both simple and powerful because it allows visualize more items in a
space much smaller compared to a usual list in 2d windows. It is
animated and at the same time elegant and intuitive, and can be
interesting in the Naali since it is a 3D object. I believe that if it
was more organic, or with convex faces and flat could not be better
and a variable length of the sphere as the number of items would also
be interesting in my viewpoint. Well, that's just a little idea, but
if there is a problem of implementation, your goals, or any other
please tell me, since I would do some visual testing (and all they
like) with this idea.

Cheers,

Haylton

On Sep 23, 9:32 am, Ryan McDougall <ryan.mcdoug...@realxtend.org>
wrote:

[Ryan McDougall]

On Sun, Sep 27, 2009 at 6:53 AM, Haylton Bomfim <hayl...@gmail.com> wrote:
>
> Hi friends,
> I think the 3D interface display of site http://www.taggalaxy.com is
> both simple and powerful because it allows visualize more items in a
> space much smaller compared to a usual list in 2d windows. It is
> animated and at the same time elegant and intuitive, and can be
> interesting in the Naali since it is a 3D object. I believe that if it
> was more organic, or with convex faces and flat could not be better
> and a variable length of the sphere as the number of items would also
> be interesting in my viewpoint. Well, that's just a little idea, but
> if there is a problem of implementation, your goals, or any other
> please tell me, since I would do some visual testing (and all they
> like) with this idea.
>
> Cheers,
>
> Haylton
>

Haylton,

I think the website is rather interesting, and certainly its 3-D, I'm
not really sure how specifically you would apply to website user
interface to Naali.

Perhaps you can expand on why you think it's interesting, and how you
think it relates to virtual worlds?

Cheers,

[Melanie]

Hi,

IMHO, that is not a suitable interface. It's too slow for the
rapid-fire clicking that is needed in both gaming and SL-type
environments. Imagining the pie menus mapped to such spheres, I
would feat that my click rate (= working speed) would be halved, or
worse. A UI needs to be usable, not fancy, IMO.

Melanie

[Haylton Bomfim]

Hi Ryan and Malanie,

Sorry, I could not explain all my idea. I intend to include the sphere
on the pie menu and not change each other. I always thought the pie
menu excellent, but I also think it's time for proposing a new version
for it, so that brought the idea of the sphere. When (in this week) I
finished a simple graphic suggestion for menu with explanations too
I'll return, ok?

Greetings.

On Sep 28, 9:16 am, Melanie <mela...@t-data.com> wrote:
> Hi,
>
> IMHO, that is not a suitable interface. It's too slow for the
> rapid-fire clicking that is needed in both gaming and SL-type
> environments. Imagining the pie menus mapped to such spheres, I
> would feat that my click rate (= working speed) would be halved, or
> worse. A UI needs to be usable, not fancy, IMO.
>
> Melanie
>
>
>
> Ryan McDougall wrote:

[Melanie]

I can, using the LL viewer, perform well-trained pie-menu tasks in <
0.25s. Your sphere could probably not handle that.

Melanie

[Jonne Nauha]

I for one would love to see what he is suggesting. This mock-up thing is a brainstorming session to get ideas rolling, not that much giving performance reviews to every idea and weather its even a good idea to try/sketch something :P

Please others on this mailing list too, give us your ideas how our UI should look, maybe sketch something up and put it up to the wiki or provide links to interesting ideas like Haylton did!

- Jonne

--
Best regards,
Jonne Nauha
realXtend developer

http://www.realxtend.org/
http://www.evocativi.com/

[Melanie]

I'm sorry, I didn't mean to come across as a wet blanket :)

Just always looking at usability over novelty, that's me.

Melanie

[Morgaine]

If there is a serious interest in usability beyond mere lip service, and if "usablity" is intended to mean more than just "like the interface that I'm already used to", then I can strongly recommend the meetings of the User eXperience Interest Group every Thursday at 3pm SLT (currently PDT), in-world in Second Life at http://slurl.com/secondlife/Hippotropolis/45/103/25 .

The UXIG members have been discussing and working on viewer UIs for some years.  It started originally as a Linden "Office Hour", but a year or two ago Lindens reduced their weekly OH to monthly, and then stopped it altogether, so the participants created UXIG in the absence of Linden interest.

Since then, an enormous number of usability topics have been covered in a lot of detail in the group.  Several viewer developers are regularly present, and some of the ideas discussed have lead to implementations in viewers.  The focus is not on SL alone, but on all compatible worlds or grids.  Opensim is used extensively by participants, and realXtend is frequently mentioned as the leading edge of open world development.  There is a strong overlap between UXIG membership and that of AW Groupies, the resident arm of the AWG among whom are several realXtend users, so perhaps there is a link there already. :-)

Usability is not easy to pin down, and believing that one's own preferences are a hallmark of high usability is almost certainly doomed as a starting point.  I suggest talking to people.


Morgaine.







======================================

[Ryan McDougall]

Do you guys have any record of your discussions and conclusions?

One ongoing problem with real-time discussions is the timezone we are
in here in Finland. I think 3pm PST is quite late here.

Cheers,

[Morgaine]

Ryan, I rather doubt that there's a transcript of UXIG deliberations, sadly, but I'll enquire.

With regard to "conclusions", if there's one single thing that has become crystal clear from the huge number of discussions it is that one person's perfect UI is another person's nightmare from hell.  Therefore, if one were to pick out a single principle that is key for usability in UIs, it is that they should be customizeable.

The notion of named UI "presets" has found much favour in UXIG, with the provider's own UI decisions being contained in a preset of the provider's name, this preset being readonly.  By this mean, tutorials and support advice can start with "Load UI Preset XXX" in order to start from a known base.

In  this design, the current UI setup can be saved to any user-specified preset name with the exception of the names of the readonly presets.  If the user has made a change to the UI with respect to the last loaded preset, then an opportunity is provided to save the current setup to a preset before it is obliterated by loading another preset.

That kind of framework provides quite a simple approach to a sort of Holy Grail for UIs, in which everybody has a chance to be happy with other people's UI design decisions. :-)

Morgaine.



====================================

[Haylton Bomfim]

Hi people,

My proposal for UI MOck-up Naali Contest is half-finished and the link
is:

http://3dweb.yolasite.com

I made in Flash because I don't know programming yet... but I´m
learning ;-)

Please, all questions, suggestions and reviews are very welcome, as
well as the impediments to make this possible in QT.

Greetings

On Oct 4, 3:40 pm, Morgaine <morgaine.din...@googlemail.com> wrote:
> Ryan, I rather doubt that there's a transcript of UXIG deliberations, sadly,
> but I'll enquire.
>
> With regard to "conclusions", if there's one single thing that has become
> crystal clear from the huge number of discussions it is that one person's
> perfect UI is another person's nightmare from hell.  Therefore, if one were
> to pick out a single principle that is key for usability in UIs, it is that

> they should be *customizeable*.
>
> The notion of *named UI "presets"* has found much favour in UXIG, with the

> > > On Tue, Sep 29, 2009 at 7:59 PM, Jonne Nauha <jonne.na...@evocativi.com>

> > > wrote:
>
> > >> I for one would love to see what he is suggesting. This mock-up thing is
> > a
> > >> brainstorming session to get ideas rolling, not that much giving
> > performance
> > >> reviews to every idea and weather its even a good idea to try/sketch
> > >> something :P
>
> > >> Please others on this mailing list too, give us your ideas how our UI
> > >> should look, maybe sketch something up and put it up to the wiki or
> > provide
> > >> links to interesting ideas like Haylton did!
>
> > >> - Jonne
>

[Ryan McDougall]

HA! That's really cool! Exactly the sort of thing I was asking for.

No idea how easy it'd be in Qt, but that's not really the point.

I like what you have there. Are there any other cool things you can
add? The Menu/Actions/Search/Build in particular would be interesting.

Cheers,

[Ryan McDougall]

What do you think of some of the results on this page:

http://www.autodeskresearch.com/3dnav/index.html

Specifically the following two papers:

http://www.autodeskresearch.com/papers/piecursor/index.html
http://www.autodeskresearch.com/papers/safe3dnav/index.html

Anything there that you think can apply to your idea?

Cheers,

[Morgaine]

My feedback on the mockup at http://3dweb.yolasite.com .... (sadly, not positive).

What's the usability model for this concept?  There's no point asking about impediments to implementing this in Qt before people know why it should be implemented at all.  What are its merits?

All I saw was an example of eye candy with hard to use menus that will be a nightmare for assessibiity, no obvious mechanism for extension nor user customization, and an odd set of rather inconsistent commands.  My immediate reaction was "Triumph of form over function, no actual thought about UI design."

Designing a usable UI has very little to do with creating a pretty graphic.  That's at the very very very very bottom of the list of requirements.  The graphics would be themable anyway, so there's not much point spending much time polishing a mockup.

While barebones mockups sometimes trigger new interface ideas, this one didn't.  On the positive side, it was rather effective at saying "Let's not do it this way."  That's not a kick in the shins.  It is actually useful to see evidence for what doesn't work well.  The thin circular menu borders were MUCH harder to use than LL's pie slices.  The startup globe was eye candy at its worst, massively unusable and non-scalable as a zone identifier and selector.  A plain list would be enormously better in all respects for usability.

The customization model I described in my previous post gave quite a detailed hint at a possible foundation for a usable UI, despite totally lacking in suggested graphics.

I would like to be able to say something more positive since your mockup must have entailed a significant amount of work to make.  The problem is, I didn't find that it offered anything new.  Instead, it just added more trouble on top of LL's poor pie menu concept.


Morgaine.





=========================================

[Ryan McDougall]

Morgaine,

The point of the contest isn't to decide the once-and-forever UI of
realXtend, it's to brainstorm on neat ideas, so that we have a rough
outline of the sort of technology we should be implementing -- It's
very unlikely we'll have anything even so sophisticated as what can be
done in flash by the end of the year.

After all, programmers are not professional designers, and no
professional designers have yet to come out of the woodwork to lend a
proper hand, so we are appreciative of what we are given freely.

Perhaps you can mock up a competing idea? Open source is meritocratic
-- decisions favor the work with the most merit, and so far Haylton is
the only one to bother making a mock-up.

A more cooperative approach would be to elaborate on the details
you've mentioned, either marking areas of improvement, or supplying a
counter proposal.

Also, what do you think of the pie menu concept from autodesk research I linked?

Cheers,

[Morgaine]

Ryan, I'm not a graphics artist, so I wouldn't even attempt to design a mockup myself, and I can't and don't evaluate other people's graphics designs on artistic merit either.  That would be working outside of my skill set and not to anyone's benefit.

Instead my skills lie in on the software side and in system and program design and architecture, which ties quite well into evaluating power and usability of software.  And that's how I evaluated what I saw and experienced.  Of course, if at this stage you have no interest in UI function or usability but only want raw eye candy ideas with not a care about whether they make any kind of sense, then obviously this feedback was out of place.

Logically, I see no purpose whatsoever in evaluating eye candy at this stage, but ONLY in evaluating UI concepts.  Isn't the UI going to be themed anyway?

From your reply, I actually think that we're in violent agreement :P, since you wrote that the goal is "to brainstorm on neat ideas".  And that's exactly the basis on which I evaluated it, as a mockup of a potentially neat idea..

Unfortunately the neat idea wasn't described, so it required some hands on clicking to try to figure out what the neat idea was.  And that quest failed, because the globe was unusable and non-scalable, and the circular menu was even worse than LL's.

Wasn't this the point of the exercise, to look at the mockups and see which worked and which failed?  This one clearly failed, and I explained why.  Perhaps I missed the neat idea in the concept altogether ... but since the concept wasn't explained, others are bound to miss it too.

Finally, I've been too busy to read all emails so I may have missed your Autodesk research post.  However, I can certainlly flesh out some of the best bits distilled from UXIG, extending the user presets scheme I mentioned a couple of days ago.  I can't make graphic mockups but I can paint pictures with words.  And these mental pictures would carry the UI rationale and benefits, which to my mind is the most important aspect of any UI.

Morgaine.



==================================

[Haylton Bomfim]

Ryan, these autodesk research papers are fantastic! I think they are
the best examples guide us all in search of a truly innovative
interface, clean and extremely functional. This research certainly
goes far beyond my early concepts about a new pie menu, and the best
are already visually available for all to see and test, in addition a
complete explanations in written form. Thanks for sharing it with
us ;-)

I promise to try bring my ideas to these concepts, but I think a lot
of work has been done by Autodesk and if people can experience the
developer has a copy of that so far these concepts of Autodesk would
be a start for a great UI for a project like Naali. I will return
soon, but I want to suggest placing this topic "UI Mock-up Contest"
also in the other realxtend list (not dev) so that more people can
participate of this collaborative engagement to a great Naali UI.

I had asked about possible impediments to transport my first concept
because I"m begining learn Python and I'll initiate soon Qt too , and
with that I would know if he should continue on the way I chose
(animated parts and no rectangle windows) or should change to make it
suitable for Qt but not that my proposal would be used my concepts to
Naali, as reviewed by Morgaine, ok? Indeed, in my opinion I see this
contest as an excellent opportunity far beyond a simple challenge to
boost the ego of the participants I think as an exchange of ideas in a
collaborative manner and not prohibitive and these shared ideas put
into practice (either through pencil drawings on paper and scan it, or
in Gimp or Photoshop or by concept diagrams that visually explain
these ideas, which is not impossible for any of us, as we learned it
when children) otherwise I would not take part of that, because only
then open source project comes forward and from me you can always
count on my participation in collaborative form. I suggest too that
everyone with an interest in creating their own version of the UI
Naali should to consider this great opportunity!

Cheers.

> > <morgaine.din...@googlemail.com> wrote:
> > > My feedback on the mockup athttp://3dweb.yolasite.com.... (sadly, not

> > > On Tue, Oct 6, 2009 at 6:15 AM, Haylton Bomfim <haylt...@gmail.com>

> ...
>
> read more »

[Jonne Nauha]

Hi Haylton,

Regarding Python with Qt, I've been doing both in my preliminary test work on UI so I can give my input. Remember that i'm no Qt expert myself, have only been playing with it for a month or so :)

Python

Python is a good place to start, as a language and its fast to write (when you get into it) prototypes/test like this in.

If we think this in how we could possibly utilize your code if it looks good then you'll have to take in consideration what options we have in Naali. Our Python side supports creating widgets and adding then to the main UI via our QtModule that can create windows outside the ogre window and inside it as "internal widgets" as we call them. Python side Qt widgets are made with PythonQt (http://pythonqt.sourceforge.net/). Me, Toni and Petri have been testing PythonQt usage in our python modules it's looking really good. Almost anything in Qt (UI related) is in PythonQt too. I think I have made the most "complicated" UI fully in python in our webdav inventory python module (http://tols17.oulu.fi/~jnauha/Ohjelmointi/realxtend/WebDavInventory_2.png) this is not the final widget by no means, but shows that its possible to make UI from Python side also in Naali. As I did the early development of this thing outside Naali using PyQt (http://www.riverbankcomputing.co.uk/software/pyqt/download) I can tell you that PyQt is more flexible, easy to use and better documented (http://www.riverbankcomputing.co.uk/static/Docs/PyQt4/html/classes.html) when PythonQt pretty much has no documentation so you'll keep guessing how to use the API and that causes frustration and loss of time.

Final point: go with Python and use PyQt. We just cant use PyQt code due to licencing issues so we use PythonQt instead.

Window/eye candy questions

I would say stick to what Qt has to offer. But this doesn't mean you'll have to stick with square boxes and be left without transition animations etc. This is just a question how much time you have and how important eye candy is in the early stages of prototyping you'll make. I would say leave animation away for now. Making round edged aka not square widgets is pretty easy with Qt stylesheets after you remove the widget frames (setWindowFlags). Only time consuming thing in this is that you'll need to handle drag, fullscreen, minimize, resize etc actions yourself. Making a lots of buttons, a custom top frame etc. So I wouldn't concentrate on that either in the beginning.

Actually today I was testing transparency and custom styled widgets as internal widgets. Just quickly putting some widgets in and making some stylesheet modifications: http://tols17.oulu.fi/~jnauha/Ohjelmointi/realxtend/Naali-to-NewTaiga-internal-widgets.png You can see the top right corner has our prototype jabber/google talk chat client as a internal widget. It has transparency and some round edges so it wont look so square and boring :) The one on the left is that webdav inventory client again, thats a external widget and has its own window frame.

Things you might be interested in:

- Check Qt stylesheets http://doc.trolltech.com/4.5/stylesheet.html

- For animation quick way to start something simple. Write you own QWidget, override the showEvent and hideEvent and put some animation in there with QTransform http://doc.trolltech.com/4.5/qtransform.html#details combined with QTimeline http://doc.trolltech.com/4.5/qtimeline.html#details (To be more spedific: You could make QTimeline lasting 1 second, start the timeline when showEvent is invoked, connect the timeline to you own metdho where you make a 180 degree rotate on the widget and some scaling from 0 to 1 for example)

Btw. that first screenshot of python webdav inventory is in PyQt and second bigger screenshot one is in PythonQt.

Best regards,
Jonne Nauha
realXtend developer

http://www.realxtend.org/
http://www.evocativi.com/

[Haylton Bomfim]

Hey Jonne,

Thanks for all these explanations, in fact a real lesson about Python,
QT, PyQt and PythonQt. Now is more visible for me technical issues
about them. I've already had a look at all the links, which motivated
me even more to learn more quickly to soon I can work with realxtend
team ;-)

Cheers!

On Oct 7, 2:27 pm, Jonne Nauha <jonne.na...@evocativi.com> wrote:
> Hi Haylton,
> Regarding Python with Qt, I've been doing both in my preliminary test work
> on UI so I can give my input. Remember that i'm no Qt expert myself, have
> only been playing with it for a month or so :)
>

> *Python*

> Python is a good place to start, as a language and its fast to write (when
> you get into it) prototypes/test like this in.
>
> If we think this in how we could possibly utilize your code if it looks good
> then you'll have to take in consideration what options we have in Naali. Our
> Python side supports creating widgets and adding then to the main UI via our
> QtModule that can create windows outside the ogre window and inside it as
> "internal widgets" as we call them. Python side Qt widgets are made with
> PythonQt (http://pythonqt.sourceforge.net/). Me, Toni and Petri have been
> testing PythonQt usage in our python modules it's looking really good.
> Almost anything in Qt (UI related) is in PythonQt too. I think I have made
> the most "complicated" UI fully in python in our webdav inventory python

> module (http://tols17.oulu.fi/~jnauha/Ohjelmointi/realxtend/WebDavInventory_2...)

> this is not the final widget by no means, but shows that its possible to
> make UI from Python side also in Naali. As I did the early development of
> this thing outside Naali using PyQt (http://www.riverbankcomputing.co.uk/software/pyqt/download) I can tell you
> that PyQt is more flexible, easy to use and better documented (http://www.riverbankcomputing.co.uk/static/Docs/PyQt4/html/classes.html)
> when PythonQt pretty much has no documentation so you'll keep guessing how
> to use the API and that causes frustration and loss of time.
>
> Final point: go with Python and use PyQt. We just cant use PyQt code due to
> licencing issues so we use PythonQt instead.
>

> *Window/eye candy questions*

> I would say stick to what Qt has to offer. But this doesn't mean you'll have
> to stick with square boxes and be left without transition animations etc.
> This is just a question how much time you have and how important eye candy
> is in the early stages of prototyping you'll make. I would say leave
> animation away for now. Making round edged aka not square widgets is pretty
> easy with Qt stylesheets after you remove the widget frames
> (setWindowFlags). Only time consuming thing in this is that you'll need to
> handle drag, fullscreen, minimize, resize etc actions yourself. Making a
> lots of buttons, a custom top frame etc. So I wouldn't concentrate on that
> either in the beginning.
>
> Actually today I was testing transparency and custom styled widgets as
> internal widgets. Just quickly putting some widgets in and making some

> stylesheet modifications:http://tols17.oulu.fi/~jnauha/Ohjelmointi/realxtend/Naali-to-NewTaiga...

> You
> can see the top right corner has our prototype jabber/google talk chat
> client as a internal widget. It has transparency and some round edges so it
> wont look so square and boring :) The one on the left is that webdav
> inventory client again, thats a external widget and has its own window
> frame.
>
> Things you might be interested in:

> - Check Qt stylesheetshttp://doc.trolltech.com/4.5/stylesheet.html

> - For animation quick way to start something simple. Write you own QWidget,
> override the showEvent and hideEvent and put some animation in there with
> QTransformhttp://doc.trolltech.com/4.5/qtransform.html#detailscombined

> with QTimelinehttp://doc.trolltech.com/4.5/qtimeline.html#details(To be

> more spedific: You could make QTimeline lasting 1 second, start the timeline
> when showEvent is invoked, connect the timeline to you own metdho where you
> make a 180 degree rotate on the widget and some scaling from 0 to 1 for
> example)
>
> Btw. that first screenshot of python webdav inventory is in PyQt and second
> bigger screenshot one is in PythonQt.
>
> Best regards,
> Jonne Nauha
> realXtend developer
>

> http://www.realxtend.org/http://www.evocativi.com/

> ...
>
> read more »

[JeanRicard Broek]

I have just posted to the Architecture+ blog my suggestion. Shamefully
I have not pre-read this thread, so I hope I am not way off base. At
the least my thoughts are untainted by previous comments here for
better or worse.. ~LOL~
the link is:
http://jeanricardbroek-architect.blogspot.com/2009/10/proposed-new-open-viewer-platform.html


On Sep 23, 8:32 am, Ryan McDougall <ryan.mcdoug...@realxtend.org>
wrote:

[Ryan McDougall]

Thank you very much for your proposal, it's a very interesting idea.
However seems to be not so much a mock-up for user interface design,
but a proposal for plug-in framework that aggregates multiple
applications into one window.

For example, a user interaction design would address who uses the
product, why they use the product, and how the design enables what
they want.

Cheers,

[Ryan McDougall]

Now *this* is an interaction design! (though not really applicable to reX atm)

http://10gui.com/
http://vimeo.com/6712657

[Haylton Bomfim]

Great, Ryan!
More great GUI concepts for everybody here http://www.stereolize.com

On Oct 13, 3:32 pm, Ryan McDougall <sempu...@gmail.com> wrote:
> Now *this* is an interaction design! (though not really applicable to reX atm)
>

> http://10gui.com/http://vimeo.com/6712657

>
>
>
> On Mon, Oct 12, 2009 at 9:12 AM, Ryan McDougall <sempu...@gmail.com> wrote:
> > Thank you very much for your proposal, it's a very interesting idea.
> > However seems to be not so much a mock-up for user interface design,
> > but a proposal for plug-in framework that aggregates multiple
> > applications into one window.
>
> > For example, a user interaction design would address who uses the
> > product, why they use the product, and how the design enables what
> > they want.
>
> > Cheers,
>
> > On Thu, Oct 8, 2009 at 7:40 PM, JeanRicard Broek
> > <jeanricard.br...@gmail.com> wrote:
>
> >> I have just posted to the Architecture+ blog my suggestion. Shamefully
> >> I have not pre-read this thread, so I hope I am not way off base. At
> >> the least my thoughts are untainted by previous comments here for
> >> better or worse.. ~LOL~
> >> the link is:

> >>http://jeanricardbroek-architect.blogspot.com/2009/10/proposed-new-op...

[Ryan McDougall]

That site has some nice results, but it kinda applies to
presentations, and doesn't say anything about how they arrived at the
results, so unfortunately I'm not sure how much we can learn from it.

Cheers,