Interface Style & Aesthetics

[caycefischer]

This is an open topic I'd like to start to just discuss the visual evolution of HabitRPG.

Obviously, at this point it's still early in development, and very much reliant on Twitter Bootstrap for UI and overall aesthetics. That's been the right move thus far. But if Tyler gets backed (fingers crossed!), HabitRPG is going to hit primetime and will have to evolve beyond what Bootstrap provides. My girlfriend, upon seeing the app for the first time, told me “it looks kinda like a barebones Twitter”. With such great work coming out of the pixel artists, I've started thinking about how, as a user and a designer, I'd like to see the interface catch up with the art.

I imagine there might be three different directions the UI aesthetics might go:

1. Kinda retro looking like the UI of an older video game, referencing the pixel art very heavily. Think Zelda, Pokemon, BrowserQuest. (1, 2, 3)
2. Fantasy-inspired, using renaissance-era typography, fantasy tropes and effects. Think Lord of the Rings, Diablo, Baldur's Gate.(1, 2, 3)
3. Try to reconcile a clean, modern UI with the pixel art. This would be a combined style using clean lines, contemporary typography and "authentically digital" interface elements. Probably the hardest to pull off, but maybe the most unique and interesting.

Does anyone have thoughts?

[ghost]

@zakkain

1. We are using brower quest graphics actually.
2. What exactly about them do you want to add to habitrpg?
3. How?

[caycefischer]

That's why I brought up BrowserQuest, I know we're using a lot of assets
from that project already. As for the second direction, I was thinking
about something with more fidelity then the boxy, exaggerated pixellation
of BQ, like how those games use high-res fonts and textures to imitate
ancient scrolls, and other real-world interfaces.

As for that last direction? I'm not entirely sure yet, I think it would
take some experimentation.
On Feb 9, 2013 7:54 PM, "Wesley Pennock" notifications@github.com wrote:

@zakkain https://github.com/zakkain 1) We are using brower quest
graphics actually 2) What exactly about them 3) Again how?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/361#issuecomment-13342208..

[ghost]

1. Hmm I think that would be interesting if it turned into a mini browser quest
2. The point of those graphics is to add an old school gaming feel though
3. White background and clean black lines

[caycefischer]

2. Well, I'd argue there's a difference between the pixel graphics of old and the cinema-style realism of games like Baldur's Gate. But it's all on a continuum, the new evolved from the old obviously. It's mostly a matter of taste.

1, 3) I agree, I think the most natural progression to a pixel-art style of interface. But I wonder if that might be gimmicky or bordering on cliché. It would also be very asset-heavy, lots of art to be created, and have running in the app. Personally, I think some compelling design can come from the third direction, a fusion of retro and modern aesthetics.

I'd really like to hear what @lefnire, and of course the user base at large, think of the app's design.

[StanLindsey]

From discussions behind the scenes and in my amateur designer brain I'd be pushing towards option 3. Even though it may be a retro style game it still is still a modern concept (using some beta backend software =O) and should conform to modern standards.

I'd say that the modern "metro" style is much easier to create in terms on content (e.g. less pixel art) as well as has a much better ability to direct attention and focus the user by not looking cluttered and utilising modern design techniques .

Mixing this modern style with pixel art is the best approach in my opinion and currently the style we are closest to at the moment. I think turning individual UI elements into 8bit style pixel art but leaving the bacground/div stylings to be modern might work. E.g. checkboxes, submit buttons etc looking more retro. This would also easily focus the user on those areas due to the juxtaposition of those elements.

Great topic @zakkain.

[horusofoz]

A mixed style sounds good but I hope we'll keep things minimalist though. We want busy users, not a busy UI.

How about some mock ups?

[StanLindsey]

Yeah thats my point of view and most modern design is all about minimalism so I think it'll work.

[lefnire]

I personally prefer simple UI, with graphics for the necessities. Habbit, Mindbloom, and many other similar apps have their entire interface "in character" (as what is being suggested) and it seems too busy and distracting to me. Eventually we'll want professional UX / UI advice, because everyone is having different opinions here. Zack, I know you do this professionally - so we should definitely take into consideration your recommendations.

As Stan suggested, I think a "best of both worlds" would be a toggleable background. Start with the simple UI so as not to distract the user, then in settings they can toggle "background". Also, I think we should go all retro, especially because - as Zack mentioned - we have a ton of BQ assets to work with from their repository, especially now that we're considering backgrounds. We can just whole-sale user their taverns, forests, rivers, etc.

[Hermione333]

3, 3 and 3. No tacky skeuomorphisms. Also no gender roles (no separation of quests, rewards, avatar add-ons etc. between men and women).
Thank you for your work :-)

[caycefischer]

Interesting that you bring up the gender issue, I grappled with that a bit
even for the customization window. I was going to add labels to the
options, but was reluctant to name the choices "male" and "female", and
rather kept them simply aesthetic: short hair & long hair.

In every choice we should remain mindful :)
On Feb 10, 2013 2:51 PM, "Hermione333" notifications@github.com wrote:

3, 3 and 3. No tacky skeuomorphisms. Also no gender roles (no separation
of quests, rewards, avatar add-ons etc. between men and women).
Thank you for your work :-)

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/361#issuecomment-13359684..

[lefnire]

yeah, i noticed you removed the labels and i was glad you did. someone mentioned previously not liking the terms "male" and "female"

[caycefischer]

Same with skin tone. Variable names are fine, but it feels weird telling
people their skin tone is "Asian" or " white". What a minefield!
On Feb 10, 2013 3:38 PM, "Tyler Renelle" notifications@github.com wrote:

yeah, i noticed you removed the labels and i was glad you did. someone
mentioned previously not liking the terms "male" and "female"

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/361#issuecomment-13360572..

[lefnire]

Seriously. I kinda want people to know that green means orc and blue means undead, but wanted to avoid confrontation with the other tons - maybe call it "lighter light dark"? Ugh, the eggshells we walk on these days.

[StanLindsey]

Maybe this ties into "races" but having gender specifically not mentioned. Depending on your race though you get different skin colours. E.g. Orcs are the only one with green skin available.

[caycefischer]

That's a cool thought—allow people to explicitly choose their race and
provide a range of tones based on that.

We could cut down on spriting too with a dash of js/css magic to create a
wider range of shades and tones
On Feb 10, 2013 3:43 PM, "Stan Lindsey" notifications@github.com wrote:

Maybe this ties into "races" but having gender specifically not mentioned.
Depending on your race though you get different skin colours. E.g. Orcs are
the only one with green skin available.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/361#issuecomment-13360693..

[Hermione333]

I was an avid player of the sims, and I think they got it right in terms of allowing the user to select a species, especially in the sims 3: you have human with all color variations in which humans come from, and then alien, werewolf, fairy etc.
For sex differentiation I really think it is unnecessary unless the avatar graphics become much more detailed, in which case there may be a need for hinted sexual attributes, specifically breasts. But I think you have done a great job by simply giving hair style choices, and anyone may choose what they want. What I do not want to see is separation of behavior and interaction according to gender.

[lefnire]

no, there definitely won't be any separate gameplay based on gender

[orangisque]

I like the idea of mixing elements from the 8-bit/16-bit like pixel art graphics with a flat-ish underlying structure. I think you can add a lot of the charm without pixelizing all the UI, with things like pixelly typography and choice of flat icons for the smaller stuff.

Did a little bit of a quick mockup here to show, since I like pictures. (By no means polished or anything...but to give an idea of what I'm illustrating towards)

I like the modular idea, lots of older RPG status screens are dialogue boxes galore (like this FF6 modular screen and Tales of Phantasia menu screen), so you can harken back to the RPG element, and it gives more flexibility for content organization. (Without all the features, however, it is hard to really say what's best and what isn't so for now I kept with what is available.) The smaller icons have the pixel look along with some headlines to match the art better but body text stays the same...so it won't be an eyesore. And a small graphic with a background on the top left to spice things up and add some visual interest :).

For details:
One thing I am thinking though is the incorporation of the colour coding for the habits/todos/dailies. I know it's an important part of the game but it can add a bit of noise to the whole design. Can try banding instead of full backgrounds.

Like this:

But hey, that's details that can be sweat over later.

[caycefischer]

Wow, out of nowhere @orangisque ! There's some really good ideas and structure in there! We've been discussing it in the live Hangout. Thanks!

[orangisque]

Hope they are useful for you guys! I'm open for more discussion about this so if you want to bounce any ideas just give me a shout :).

[Pandoro]

@orangisque yesterday I made a little color change to your mock up. It wasn't all that great though. Most of the people in the KS celebration hangout agreed though that the new colors for the different tasks was rather, distracting. My edits to your mock-up made the point pretty clear that with the original colors your mock-up has a very different impact. Because of that it would be great if you could make create something with the current colors for tasks and dailies etc. That would really be cool, to judge it in a little more neutral way.

It looks pretty cool, but some issues we notices yesterday would for example be the party. Where would that fit into your mock-up? Any thoughts on that :) ?

[orangisque]

@Pandoro
Ahh, hehe, sorry for the eyesore colours, I usually work with a really dim monitor so I don't really see the full vibrancy of the colours I pick. Here's the first mock up with the colours done to the existing palette. Although, they do seem a bit paler than it is on the actual site, even though I took the hex values exactly. Most likely an Illustrator thing plus the lack of darker outline to go around the items for the visual effect.

Going back to my other task list experiments, here's the full extent of what it can be.

Also, embarrassingly enough I don't seem to see the party function on my end (not unlocked it yet?) so I completely missed that part. But, this is one way of doing it.

For that menu bar, I am thinking more of a click to switch tabs over a hovering thing. I figured we can save some screen space by shrinking the life and EXP bars because they do take up lots of space. Now the argument can be had that it gives a grand effect of seeing it that long. No real objections there other than it does take up a lot of unnecessary space.

Only caveat here, probably seen very clearly, is the limited number of menu items. Size can be shrunk down but at a certain point it may be a problem. A way around it is to have the most important links out and then turning one of those items into an "Other" and having the rest of the menu appear.

Play around with another arrangement of the task items and menus:

This one I bumped up the colours' vibrancy to try it out, it doesn't hurt too much since the colours are smaller bands instead of large areas. Rearranging the top left area to be more like a game screen almost. The menu here is now tabs with icons so you can fit more items on the tabs. At a certain point of course, you run into the same problem as the mockup above of having more items, but I don't know if there would be that many items you want to display all at once for the user. Another inconvenience here is having to make the icons...but I'm sure someone can do this ;).

SUPEREDIT: For this one option, I put the user names underneath the party too, but as you can see with Awesomesparklesauce, name length might be an issue. Limits?

Also thinking mobile/small screens in mind, the icons does help save space. Rearranged, it can be like this, and the menu items pop up on click.

Of course, there are a ton of details to be worked out (iOS and Android design requirements, anyone?) and I should brush up on the full feature set (or maybe someone can outline?) that the game will have, it will really help inform the design.

Sorry if I seem totally spammy and spewing stuff, this project is super exciting and since I'm not that up to snuff with all the coding, but I figured I can contribute through design. :)

[caycefischer]

Hooooly! There's a lot to dive into here, you're awesome Joanna!

@lefnire you weren't sold yesterday on the mockup, but take another look now at how the layout might accomodate the party system and retain a clean, whitespace-healthy layout. I'm really digging the modular "dashboard" style, and I'm warming up to the idea of a backdrop behind the avatar area.

@orangisque, my gut inclination is that a layout similar to that second image (with the menu and party) would work really well for the right-hand side of the screen, but reworking the left-hand side of it to get the health/XP bars more tied to the avatar again (closer to what we have now). And that mobile mockup is looking gooood!

[toebu]

Sweet, I really like the last version (with more space for the party and the avatar. Also, I like the task colours better with the narrow strip on the side than on top. It's clearer that way with which task the colour goes.

[StanLindsey]

As an upgrade on the current style, I'm starting to quite dig this. We'll have to discuss some of the upcoming features such as where the town crier would stand but I think many of the menu options would work the way you've envisioned and you could still possibly fit more icons in there.

I'm off to bed but heres some quick input from my end;
In the first image I've moved the "menu" bar in line with the HP&EXP bar. It does remove some of the vertical asymmetricness but its mostly so a static header like the one in the second image could scroll down with the window without taking up any room. If you click on a menu button it brings the window back to the top with the "party" area replaced with whatever that menu is.

Just my quick 2 cents, off to bed now! Comments?

Relocate Menu;

Header;

[wc8]

@orangisque any ideas for putting available coins in the header? There have been at least a few requests for that.

[lefnire]

I'm starting to like it the more it fleshes out. Stan's latest spin I like the most (obviously majority credit to @orangisque). I'm realizing that my aversion to it may have been my RPG style from growing up, I've never played those compartmentalized RPGs that y'all are talking about, though I know the sort - I played more fluid ones like Secret of Mana, which semi-directed my hand. Obviously if either versions (yours or mine) are chosen, they'll evolved - but maybe we should have a vote on which one people would prefer as the design "base" - maybe a Trello temporary single column with two cards.

[caycefischer]

I think that's a good idea. Once we as a group decide the gist of it, we
can work on making it as awesome as possible without getting sidetracked or
second-guessing
On Feb 18, 2013 6:53 PM, "Tyler Renelle" notifications@github.com wrote:

I'm starting to like it the more it fleshes out. Stan's latest spin I like
the most (obviously majority credit to @orangisquehttps://github.com/orangisque).
I'm realizing that my aversion to it may have been my RPG style from
growing up, I've never played those compartmentalized RPGs that y'all are
talking about, though I know the sort - I played more fluid ones like
Secret of Mana, which semi-directed my hand. Obviously if either
versions (yours or mine) are chosen, they'll evolved - but maybe we should
have a vote on which one people would prefer as the design "base" - maybe a
Trello temporary single column with two cards.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/361#issuecomment-13749701.

[orangisque]

@SlappyBag Oh, floating header is a great idea! Especially if people have piled up the to-do's. Would help with mobile site when people are scrolled down.

I do think more exploration is merited, as this is just something I threw together over the span of 2 days. Another concept (or 2, if time permits!) to see the breath would be great. Even if it is a crude wireframe of sorts would give people an idea as to how it would look. (Text is nice and all but hard to judge unless it's done! ...At least for me.)

Now that @lefnire mentioned Secret of Mana, gives me an idea...

[caycefischer]

Absolutely, I'm treating these as wires and exploratory mockups.

On the point of floating headers, we had a floating header initially on the
site, and it created a lot of problems for mobile users because it was too
tall and covered most of the screen—and since it floated, you couldn't
scroll past it! I think it works great for desktop, but on narrow, portrait
screens we could design a scrollable/tabbed sort of thing (think the
Facebook app, but the slide-out panel has your avatar and info maybe?)

On Mon, Feb 18, 2013 at 7:11 PM, Joanna notifications@github.com wrote:

@SlappyBag https://github.com/SlappyBag Oh, floating header is a great
idea! Especially if people have piled up the to-do's. Would help with
mobile site when people are scrolled down.

I do think more exploration is merited, as this is just something I threw
together over the span of 2 days. Another concept (or 2, if time permits!)
to see the breath would be great. Even if it is a crude wireframe of sorts
would give people an idea as to how it would look. (Text is nice and all
but hard to judge unless it's done! ...At least for me.)

Now that @lefnire https://github.com/lefnire mentioned Secret of Mana,
gives me an idea...

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/361#issuecomment-13750239.

– Zachary Kain

Designer, Creative Technologist
416-712-8895
zakkain@gmail.com
→ view my resume/profile http://zerply.com/zakkain/public

[horusofoz]

@lefnire The footer is a viable possibility which would be consistent with mobile version.

My thinking is a left panel is a better utilisation of screen real estate considering the widescreen format monitors tend to sell in these days.

[lefnire]

We'll probably want to give tokens a distinct separation, somewhere else in the UI so people know they're different currencies and don't think it's "platinum" (we'll probaly be adding copper for MMO consistency, gold silver copper).

[horusofoz]

Mobile Layout Explanation:

[lefnire]

I actually like this quite a bit, it answers a lot of questions as to what in the interface triggers NPC dialogs. @zakkain I'm torn now - you're totally right about widescreen, we have much more width than height to work with. On the flip side, RPG interface familiarity... hmm, well something to bounce around in our brains.

[caycefischer]

You know, overall I think it's really good—but I do have some concerns.
Foremost being the usability of the smaller screen widths in those mockups.
Splitting the navigation between top and bottom is a really dangerous idea
I think, that's going to impact usability a lot. We really should stick
with one or the other. Also, there are A LOT of navigation buttons and I
think we don't need so many—it's really overwhelming, even to me when I
know what they all do. For a new user it'd be chaos. I'm all for a
consistent navigation experience in general, but there's a more natural
or friendly way to do it I think. We need to put some solid time into the
Design of the interface, not what it looks like but how it's used—that's
becoming critical as the app grows in functionality. I'm pushing this same
point in the mobile app card on trello too—it's really important.

I am also torn, @lefnire. I agree with @horusofoz that we should take
advantage of extra horizontal space, IF we have it. But while a
sidebar-style action bar isn't unheard of in RPGs, the bottom bar feels a
lot more natural. But like I said we need to talk a lot about user flow and
what actions we want to prioritize, what the users' priorities are, etc,
before we design an interface around those goals.

Sorry if I sound wishy-washy and all "but we need to talk about it more
wahhh"—I do feel that these points are really critical to explore before
making big layout decisions like this. An approach informed by research and
design thinking will serve us well.

On Sun, Mar 10, 2013 at 12:46 PM, Tyler Renelle notifications@github.comwrote:

I actually like this quite a bit, it answers a lot of questions as to what
in the interface triggers NPC dialogs. @zakkainhttps://github.com/zakkainI'm torn now - you're totally right about widescreen, we have much more
width than height to work with. On the flip side, RPG interface
familiarity... hmm, well something to bounce around in our brains.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/361#issuecomment-14684353
.

– Zachary Kain

Designer, Creative Technologist
416-712-8895
zakkain@gmail.com
→ view my resume/profile http://zerply.com/zakkain/public

[ghost]

@horusofoz I agree with the mobile design, I will bring it to litenull the next chance I get

[lefnire]

@zakkain wishy-washy away! It's all about bouncing ideas off each other in
these tickets at a fast pace.

We can avoid complex interface by having a plus sign which brings up the
action bar (whether sidebar or footer), collapsed by default until one day
out of curiosity "what's this button?" (or a feature-unlock points to it
with a popover). i'm also thinking about smaller icons (favicons almost),
but your mockups work much better with the amount of actions we'll have in
the system, if we want the bar to stretch-to-fit. It does look like a lot
of buttons, but I think the amount is about accurate, really - stables,
inventory, quests, guild, merchant, tavern - we got a ton of features on
the horizon, and they'll have to be accessible somehow. I think our
original plan was contextual tabs (avatar dialog has inventory, profile,
equipped, etc - shop dialog has merchant, stable, tavern, etc). But that
might pose some navigation difficulty - "where was the stable tab again?"

On Sunday, March 10, 2013, Zachary Kain wrote:

You know, overall I think it's really good—but I do have some concerns.
Foremost being the usability of the smaller screen widths in those
mockups.
Splitting the navigation between top and bottom is a really dangerous idea
I think, that's going to impact usability a lot. We really should stick
with one or the other. Also, there are A LOT of navigation buttons and I
think we don't need so many—it's really overwhelming, even to me when I
know what they all do. For a new user it'd be chaos. I'm all for a
consistent navigation experience in general, but there's a more natural
or friendly way to do it I think. We need to put some solid time into the
Design of the interface, not what it looks like but how it's used—that's
becoming critical as the app grows in functionality. I'm pushing this same
point in the mobile app card on trello too—it's really important.

I am also torn, @lefnire. I agree with @horusofoz that we should take
advantage of extra horizontal space, IF we have it. But while a
sidebar-style action bar isn't unheard of in RPGs, the bottom bar feels a
lot more natural. But like I said we need to talk a lot about user flow
and
what actions we want to prioritize, what the users' priorities are, etc,
before we design an interface around those goals.

Sorry if I sound wishy-washy and all "but we need to talk about it more
wahhh"—I do feel that these points are really critical to explore before
making big layout decisions like this. An approach informed by research
and
design thinking will serve us well.

On Sun, Mar 10, 2013 at 12:46 PM, Tyler Renelle <notifications@github.com<javascript:_e({}, 'cvml', 'notifications@github.com');>>wrote:

I actually like this quite a bit, it answers a lot of questions as to
what
in the interface triggers NPC dialogs. @zakkain<
https://github.com/zakkain>I'm torn now - you're totally right about
widescreen, we have much more
width than height to work with. On the flip side, RPG interface
familiarity... hmm, well something to bounce around in our brains.

—
Reply to this email directly or view it on GitHub<
https://github.com/lefnire/habitrpg/issues/361#issuecomment-14684353>
.

– Zachary Kain

Designer, Creative Technologist
416-712-8895
zakkain@gmail.com <javascript:_e({}, 'cvml', 'zakkain@gmail.com');>
→ view my resume/profile http://zerply.com/zakkain/public

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/361#issuecomment-14684513
.

[caycefischer]

That's an interesting point we should explore with testing eventually—I
like the idea of contextual nav a lot, but you're correct, if done wrong
it would get mad confusing. Let's not do it wrong and hopefully it'll work
out. ;)

Personally, I think a lot of that type of navigation (stable, inventory,
etc) can be accessible from the Profile/Avatar view, so it doesn't clutter
up the Accomplishing Tasks user flow.

On Sun, Mar 10, 2013 at 1:08 PM, Tyler Renelle notifications@github.comwrote:

@zakkain wishy-washy away! It's all about bouncing ideas off each other in
these tickets at a fast pace.

We can avoid complex interface by having a plus sign which brings up the
action bar (whether sidebar or footer), collapsed by default until one day
out of curiosity "what's this button?" (or a feature-unlock points to it
with a popover). i'm also thinking about smaller icons (favicons almost),
but your mockups work much better with the amount of actions we'll have in
the system, if we want the bar to stretch-to-fit. It does look like a lot
of buttons, but I think the amount is about accurate, really - stables,
inventory, quests, guild, merchant, tavern - we got a ton of features on
the horizon, and they'll have to be accessible somehow. I think our
original plan was contextual tabs (avatar dialog has inventory, profile,
equipped, etc - shop dialog has merchant, stable, tavern, etc). But that
might pose some navigation difficulty - "where was the stable tab again?"

On Sunday, March 10, 2013, Zachary Kain wrote:

You know, overall I think it's really good—but I do have some concerns.
Foremost being the usability of the smaller screen widths in those
mockups.
Splitting the navigation between top and bottom is a really dangerous
idea
I think, that's going to impact usability a lot. We really should stick
with one or the other. Also, there are A LOT of navigation buttons and I
think we don't need so many—it's really overwhelming, even to me when I
know what they all do. For a new user it'd be chaos. I'm all for a
consistent navigation experience in general, but there's a more
natural
or friendly way to do it I think. We need to put some solid time into
the
Design of the interface, not what it looks like but how it's used—that's
becoming critical as the app grows in functionality. I'm pushing this
same
point in the mobile app card on trello too—it's really important.

I am also torn, @lefnire. I agree with @horusofoz that we should take
advantage of extra horizontal space, IF we have it. But while a
sidebar-style action bar isn't unheard of in RPGs, the bottom bar feels
a
lot more natural. But like I said we need to talk a lot about user flow
and
what actions we want to prioritize, what the users' priorities are, etc,
before we design an interface around those goals.

Sorry if I sound wishy-washy and all "but we need to talk about it more
wahhh"—I do feel that these points are really critical to explore before
making big layout decisions like this. An approach informed by research
and
design thinking will serve us well.

On Sun, Mar 10, 2013 at 12:46 PM, Tyler Renelle <
notifications@github.com<javascript:_e({}, 'cvml', '
notifications@github.com');>>wrote:

I actually like this quite a bit, it answers a lot of questions as to
what
in the interface triggers NPC dialogs. @zakkain<
https://github.com/zakkain>I'm torn now - you're totally right about
widescreen, we have much more
width than height to work with. On the flip side, RPG interface
familiarity... hmm, well something to bounce around in our brains.

—
Reply to this email directly or view it on GitHub<
https://github.com/lefnire/habitrpg/issues/361#issuecomment-14684353>
.

– Zachary Kain

Designer, Creative Technologist
416-712-8895
zakkain@gmail.com <javascript:_e({}, 'cvml', 'zakkain@gmail.com');>
→ view my resume/profile http://zerply.com/zakkain/public

—
Reply to this email directly or view it on GitHub<
https://github.com/lefnire/habitrpg/issues/361#issuecomment-14684513>
.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/361#issuecomment-14684712
.

– Zachary Kain

Designer, Creative Technologist
416-712-8895
zakkain@gmail.com
→ view my resume/profile http://zerply.com/zakkain/public

[horusofoz]

Mobile:
Regarding too many buttons. I think if we keep the functions that will be used most often on the bottom row we will be fine. I know when I'm holding my phone that is where my thumbs are at.

Web:
Remember each feature/button is only introduced over time. Users will have plenty of time to acclimatise.

For all the minimalists out there a button to hide/collapse the launchers wouldn't go astray ;)

[horusofoz]

I like the thought of having all your currencies together. If having it black/onyx/obsidian as above isn't enough to denote difference, maybe have 60 second loop shine animation and too tip that specifies tokens are real money.

[horusofoz]

Here are the GIMP XCFs if anyone want's to play with them:
Mobile UI
Web UI

[caycefischer]

"Remember each feature/button is only introduced over time. Users will have
plenty of time to acclimatise."

Not to be dogmatic, but that's exactly what I'm trying to avoid. Feature
creep and UI-creep is bad—we need to lay out our plan and design a system
that works for everyone—new users a year from now, power users right now,
and everyone in-between. We need a real strategy and a UI that can grow and
evolve within that strategy to be accessible, enjoyable—and yes, powerful
and customizable—in equal measure.

On Sun, Mar 10, 2013 at 2:09 PM, horusofoz notifications@github.com wrote:

Here are the GIMP XCFs if anyone want's to play with them:
Mobile UIhttps://docs.google.com/file/d/0B1BZD9T72VKAR2h6cVFfQzF2Uk0/edit?usp=sharing
Web UIhttps://docs.google.com/file/d/0B1BZD9T72VKAR2J5Yl9hcEc3ZDA/edit?usp=sharing

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/361#issuecomment-14685858
.

– Zachary Kain

Designer, Creative Technologist
416-712-8895
zakkain@gmail.com
→ view my resume/profile http://zerply.com/zakkain/public

[wildcate]

Regarding the buttons: Sidebar, please! Even if it might be a little less RPG-feeling - but with a very long list of tasks, the bottom bar will be very, very far away.

(Unless, of course, you are planning to install a floating bottom bar with the icons, and that, together with the floating header, might take away too much vertical real estate.)

@zakkain I think @horusofoz' comment about things being introduced over time referred to the many buttons being confusing for users and had nothing per se to do with organising a good UI without creep : )

[lemoness]

I definitely agree with @wildcate about the side-vs-bottom bar - my to-do list is always huge, so I never see the real bottom of my screen.

[caycefischer]

Maybe we could fix the bar to the bottom so it's sticky, kind of like the
header is now? When the screen gets narrow enough we won't have room for a
side bar so I'd like to find a solution that can remain consistent in the
webapp.

On Mon, Mar 11, 2013 at 3:22 PM, lemoness notifications@github.com wrote:

I definitely agree with @wildcate https://github.com/wildcate about the
side-vs-bottom bar - my to-do list is always huge, so I never see the real
bottom of my screen.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/361#issuecomment-14736271
.

– Zachary Kain

Designer, Creative Technologist
416-712-8895
zakkain@gmail.com
→ view my resume/profile http://zerply.com/zakkain/public

[wildcate]

@zakkain Fixing the bar as a sticky would solve the huge-to-do-list-issue, yes.
However, it would cut down on screen real estate in the other direction. With the firefox menu, the tabs, my bookmark bar and the current floating header, exactly one third of the vertical space on my screen is already taken up, so I can see about 6-7 list items starting from the very top, or 8 to max. 10 items when I scroll down so the first list item is directly under the header.
So a chunky bottom bar... not a good idea for my screen size. Though I do understand the concern with keeping the web version and the mobile version similar/the same, I'd still prefer a side bar for the web version.

[horusofoz]

How difficult would it be to make an option for the action bar location? I personally prefer the side bar for my 1920x1080 screen but others would undoubtedly prefer the bottom, right or top (docked just above the header).

[lefnire]

I think difficult enough to not be worth the added effort & upkeep. At this
point I think we should prefer the sidebar

On Sunday, March 17, 2013, horusofoz wrote:

How difficult would it be to make an option for the action bar location? I
personally prefer the side bar for my 1920x1080 screen but others would
undoubtedly prefer the bottom, right or top (docked just above the header).

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/361#issuecomment-15021780
.