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?

[caycefischer]

Let me address some stuff given our current status/progress:

1. By popular opinion we're going to go ahead with the full-coloured boxes—they're more eye-catching like you said @wildcate, they're better for accessibility as well. The colour-blind setting is something that is critical, that's such a good point — I'm going to start working on that ASAP.
2. @orangisque: myself, @lefnire and a bunch of us are pretty much set on going with a clean, modern look—no pixel font for the column headers and the Add New buttons are going to be basic and clean as well. However, all that good pixel text and stone-button style stuff will re-surface in an "Enhanced Skin", which will transform the layout from a clean, "modern" webapp into a Zelda-style fantasy layout. All opt-in in the settings, of course. That's still a bit farther down the pipeline, but it's coming. You've been super with these mockups, if you want to re-focus and help us out on that "Enhanced Skin", we would be ecstatic.
3. @wildcate you are absolutely right on the gender issues, I can't believe I still wrote Gender after specifically not labeling them Male and Female – I thought I was being so good about that stuff. I've already fixed it in my code and will push that up to the live site soon. Revised user avatar stuff is coming as well, stay tuned.

[wildcate]

@zakkain Thanks! I'm looking forward to seeing the new avatar stuff. It's really cool that all this is possible : )

[orangisque]

@zakkain Sure, no problem! Glad to hear things are going along. I'll probably regroup a bit and collect some visual material to get started. Let me know if there's anything I should look out for.

Is the interface being reworked? It would be great to know what direction you guys opted for.

[caycefischer]

@orangisque We're going with a hybrid—kind of halfway between the full-on blocky modular approach and the current layout with a consistent header. We're not implementing the avatar/window backdrop yet, though that might still get added in later. I'm using the way you separate player area and party area, that really works (and moving the gold up to the player area other tweaks like that)

[lefnire]

:+1:

[horusofoz]

Here is my proposal for a sleek consistent UI across the web and mobile apps. This may take a take a bit so bear with me. Also keep in mind stuff like launcher icons and their order are place holders at this point. I'm hoping our artists here and in the Pixel Artists thread can come through with some more appropriate bits.

Web App Layout:

Mobile App Layout:

[lefnire]

What about in the footer for the web? We may be adding an action bar with skills for classes (particularly for wizards, who will cast spells). See how WoW does it with action bar to the left, and launcher icons to the right

[horusofoz]

Details for the Web App Layout:

Avatar Area Explanation:

Party Area Explanation:

Task Area Explanation:

NPC Launcher Area Explanation:

Note not all of this would be immediately visiblt. The relevant NPCs/features would only become visible as required. For example here is a user on level 1:

Here is an example of how it would look at level 3 with the store unlocked (It's level 3 right?)

[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/lefnire/habitrpg/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/lefnire/habitrpg/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/lefnire/habitrpg/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/lefnire/habitrpg/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/lefnire/habitrpg/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/lefnire/habitrpg/issues/361#issuecomment-15021780 .