Zak's Design Tweaks & Rewrites Thread

[caycefischer]

Just a log for me to record before/after screencaps of my random interface tweaks. Anyone is welcome to suggest further changes or critique.

This is probably only of interest to UI nerds and members of the dev team.

[caycefischer]

Yes, it is – currently stats/ charts are hella broken, so I removed the button

On Sunday, March 17, 2013, horusofoz wrote:

Also I noticed all progress/history is missing. Sorry if I missed the memo but is this by design?

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/585#issuecomment-15021480 .

– Zachary Kain

Designer, Developer Writer, Educator 416-712-8895 zakkain@gmail.com ➝ http://draftingcode.com

[horusofoz]

When adding new tasks, the text is visible behind the add button. Applies to Habits/Dailys/Todos/Rewards. Screenshot

[caycefischer]

task button opacity fixed in ba16338bf9c83921e9d975229a70a1a8275edea1

input height fixed in eceae48b2bcf45f79da62696dd539867224dcfb3

[caycefischer]

Thoughts on a better icon for uncompleted Dailies and Todos? A good point was made during the podcast that the sketched-in box kinda looks like it's completed—filled in.

Here's a blank one:

Here's a circle again:

And some others:

---

Personally, I think the top one, the basic square outline, is the way to go. Though there's something cool about the faux-depth of the bottom left one.

[switz]

I vote for the 'totally blank's, I think they look sleek.

On Monday, March 18, 2013 at 5:42 PM, Zachary Kain wrote:

Thoughts on a better icon for uncompleted Dailies and Todos? A good point was made during the podcast that the sketched-in box kinda looks like it's completed—filled in.
Here's a blank one: Here's a circle again: And some others: Personally, I think the top one, the basic square outline, is the way to go. Though there's something cool about the faux-depth of the bottom left one.

— Reply to this email directly or view it on GitHub (https://github.com/lefnire/habitrpg/issues/585#issuecomment-15083847).

[horusofoz]

+1 for 'totally blank's, I think they look sleek.'.

Cleanest and easiest to understand IMO.

[Shaners]

I like the blank box one (top) seems straight forward and tells me immediately I could click it.

Maybe the hashed boxes could be used for tasks that aren't able to be completed yet? I.e. if / when stepped tasks are introduced the tasks that require another to be completed first use a hashed box.

On Mar 18, 2013, at 2:42 PM, Zachary Kain notifications@github.com wrote:

Thoughts on a better icon for uncompleted Dailies and Todos? A good point was made during the podcast that the sketched-in box kinda looks like it's completed—filled in.

Here's a blank one:

Here's a circle again:

And some others:

Personally, I think the top one, the basic square outline, is the way to go. Though there's something cool about the faux-depth of the bottom left one.

— Reply to this email directly or view it on GitHub.

[caycefischer]

Wow, a lot of support for the blank one! I'm surprised—personally it feels like there's something missing.

@Shaners I like that idea, as we build out more functionality like timed tasks whatnot, we can expand our icon vocabulary.

Well, if a few more people pipe up in favor of the blank box, I'll push and merge to develop in time for the UI going live on the master branch.

[horusofoz]

Just to clarify this is the blank one I was referring to:

[wc8]

I'm leaning towards the blank one, too.

[caycefischer]

Cool, that's what I'll merge then. I'll say it is growing on me :shipit:

[ghost]

I prefer the blank one as well.

[caycefischer]

Some good stuff coming down the pipe, friends—new header and the beginning of a new “herobox” system for user avatars. Keep your eyes peeled on beta the next couple days, you really gotta play with it.

[switz]

Nice I dig it! Great job.

I would maybe combine the + - box into a consistent width, that way every habit aligns properly.

On Tuesday, March 19, 2013 at 12:57 AM, Zachary Kain wrote:

Some good stuff coming down the pipe, friends—new header and the beginning of a new “herobox” system for user avatars. Keep your eyes peeled on beta the next couple days, you really gotta play with it.

— Reply to this email directly or view it on GitHub (https://github.com/lefnire/habitrpg/issues/585#issuecomment-15097541).

[wc8]

I'd suggest diagonal buttons + over -, but that might be too hard to click.

I miss the depth on the power meters, but it does match the rest. XP tooltip is great.

Considering a comment made on difficulty telling the difference between blue and grey shading of the original design: I wonder if the blue/green colors on the settings menu are too similar for people with vision/color problems.

[caycefischer]

That's a good point, I'll run it through some tools and ask some sight-impaired friends. I'm not 100% happy with the blue/grey/teal yet.

[caycefischer]

As much as my design ocd would love symmetrical habits regardless of whether or not it's a plus or a plus and minus...... I don't think we can do that without sacrificing usability. We need those big guy targets and clear buttons. Any more ideas friends?

[wildcate]

I like the shaded boxes for clicking - I'm just a fan of the classical checkbox design. But the blank one works for me too - I :+1: that the hashed box looked like pre-completed.

And just a wild idea: Maybe the plus-minus-boxes could have the plus on the left and the minus on the right?

[wc8]

Since you mentioned it, the blue/grey/teal of the settings drop-down and the reward boxes look a little dingy next to the other vibrant colors.

I wonder, further, if the reward boxes could be a color not used by the task system (perhaps a shade of purple—luxury??); something that would contrast well with the coin and fit in with the other colors.

[Shaners]

Just wanted to say you're going a great job with all of this stuff Zak!

[lefnire]

A mother-effing masterpiece. I flip back and forth with the old design from time to time, and get embarrassed :) When I see people using production, I tell them to use beta instead - "oh wow! This is much prettier!". Just remember that feedback is forward-thinking in the Githubosphere, and what you aren't hearing is the present-thinking - which is :+1: :+1: :+1: .

[wc8]

The fact that the forward-thinking suggestions are just fine-tuning (nitpicking) is a backwards complement.

[caycefischer]

[wc8]

Hm... blue from the add new in the level label & username drop down? (Just a thought.) (Could/should those two items be merged?)

[caycefischer]

That's a good idea, combining the menu and user area! :+1:

[wc8]

By the way, I like having the username and level next to each other. Here's another brainstorming idea: have the username & level # golden to match the experience bar to increase the visual association of level up & experience points.

[horusofoz]

Fix implemented "under task button opacity fixed in ba16338" now causes long text tasks to appear Behind the solid colour task add button rather than seeing through it. Need to shorten text field rather than overlay the task add button. (Excuse ignorance of coding lingo/methods).

[ghost]

Perhaps an idea for a more minimal/alternative mobile view, have tiles for every habit/daily/todo and just have it show a big button with just that icon, as I'd mostly use the mobile app to update my progress rather than anything else, and this would make that easier.

[caycefischer]

@wc8 fixed the line height issue! PRing to develop @lefnire (oops wait no—there will be merge confs. Will do w/ you later)

[wc8]

@xeross that could be considered after Task/Reward Icons are implemented P.S. I like the idea, maybe it could be considered for a future theme. I'll try to add it to Trello tomorrow. For now, I just made a note on the icon suggestion card.

[lefnire]

pushed to prod. our branches were getting to out of sync, and cherry-picking was becoming an issue. @zakkain, could you do your input-field magic on the "restore" tool too?

[caycefischer]

Yessir​!

[caycefischer]

​I gotta pull from your develop branch and sort out any conflicts, I'll figure it out.

In the future though, put a class of option-group on elements wrapping inputs, and a class of option-content on the input itself.

When I get our proper styles sorted (post-bootstrap hacks) this will become the default input style across all inputs, but right now I need classes to win specificity.

[Shmuel510]

I just got directed here, after the shock of the new design hit...

Probably my feelings on this are all out of proportion to their actual weight, but the best bit of the original design was being able to put a tick in a box. That is one of life's simple joys, one even a Vogon can appreciate. There is an empty box. You put a tick in it. There is now a tick in the box, and that much is well in the world. Shaded boxes being replaced by ticks isn't nearly as satisfying. (Implied boxes, which seems to be where you're headed above, do seem better than shaded boxes, but they still fall short of the tick-in-box experience.)

But that's just me.

[caycefischer]

We're on it, dude! Check the bottom of this thread here, we're going with the blank box option instead. There's been lots of feedback on the tick-boxing experience, and an update should appear soon. THanks for the feedback :)

– Zachary Kain

Designer, Developer Writer, Educator 416-712-8895 zakkain@gmail.com ➝ http://draftingcode.com

On Thu, Mar 21, 2013 at 1:49 PM, Shmuel510 notifications@github.com wrote:

I just got directed here, after the shock of the new design hit...

Probably my feelings on this are all out of proportion to their actual weight, but the best bit of the original design was being able to put a tick in a box. That is one of life's simple joys, one even a Vogon can appreciate. There is an empty box. You put a tick in it. There is now a tick in the box, and that much is well in the world. Shaded boxes being replaced by ticks isn't nearly as satisfying. (Implied boxes, which seems to be where you're headed above, do seem better than shaded boxes, but they still fall short of the tick-in-box experience.)

But that's just me.

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/585#issuecomment-15254546 .

[hayleykilroy]

I like some of changes, but it kind of looks like a rainbow threw up all over my page. And everything is HUGE now; before, it was more compact & cleaner. My eyes simply don't know where to look. This is maybe partly due to the newness of the design, but I feel like before my eyes were drawn to the text (what I needed to do), and now they're drawn to these huge, brightly colored square buttons that detract from the actual task at hand. And I have to scroll a lot more to see my whole to-do list, which doesn't help me stay on task.

Maybe just mellow the colors out a bit, and make the buttons smaller? Looks like some of your earlier versions of the design were more along those lines. (Sorry to be a negative Nancy--please keep up the good work!)

[mutedgrey]

I thought I might provide some feedback as well. It's exciting to see changes being made and just a glance at all the stuff to come listed on trello is awesome. Thank you so much for the time you've put into improving the site!

Things I like about the new design: 1) Breaking up personal vs. store rewards is great. It's not something I thought of but I really like seeing them separated a little. 2) The way the reward price has a colored background in the reward list looks good and makes it easier to read. 3) It collapses nicely when I shrink my browser window and it's fairly easy to scroll through. 4) Overall, if I lean back and try to take in the overall design, it does look very clean, if also very colorful.

Things I don't like about the new design: 1) The colors feel overwhelming and inconsistent between todos, habits, and dailies. It's confusing for completed habits to turn green but completed dailies turn grey (which I prefer). 2) The green plus and red negative signs were easier to see at a glance regardless of state of completion before rather than the whole box turning that color. I also liked them being round before and I like the circles in your earlier designs. 3) Boxes with text that goes onto a second or third line become ginormous! 4) I preferred the rounded corners a lot more, including in your earlier designs, but I realize that's a personal preference. Maybe it could become a toggled option or setting in the future to choose how they look? Like you don't have enough to do already, haha.

[ghost]

The header gradient seems so out of place. Sexy straight lines do not mix with gradients. I think you should have waited before the whole transition was "done" before putting it on production. Try to push that header update ASAP :shipit:

[lefnire]

header, avatars, & checkboxes pushed to prod. @aLaserShark & @Shmuel510 check that out.

[Shmuel510]

That works much better for me, and I recant the parenthetical bit of my original complaint. Thanks for the speedy update! :-)

[ghost]

Many thanks :) Much smoother.

I edited out all the unneeded email crap...Why was that put there again? Stupid outlook...

[lefnire]

Might be helpful to start using polls to handle UI disagreements. I've been doing that in Trello when arguments crop up on features developed. Had to do it on the Priority Multiplier for example because people were up-in-arms about 3, 5, 10, or custom # of options. Vast majority said 3 - settled.

Now, downside is only the people with strong opinions as to what's wrong with the UI will show up here, so it might not be as valuable as it could - but it's worth a shot.

I'll start it off:

• Centered, or Left-justified header
• Should we make things smaller?
• Rounded, or Sharpe corners
• Too colorful?

[Pandoro]

Tyler you just said what I was going to mention about the new header ;)

On Thu, Mar 21, 2013 at 10:19 PM, aLaserShark notifications@github.comwrote:

Many thanks :) Much smoother.

From: Shmuel510 [mailto:notifications@github.com] Sent: Thursday, March 21, 2013 5:19 PM To: lefnire/habitrpg Cc: aLaserShark Subject: Re: [habitrpg] Zak's Design Tweaks & Rewrites Thread (#585)

That works much better for me, and I recant the parenthetical bit of my original complaint. Thanks for the speedy update! :-)

— Reply to this email directly or view it on GitHub < https://github.com/lefnire/habitrpg/issues/585#issuecomment-15266018> . < https://github.com/notifications/beacon/1IJIDCFE4piz6M-ppVUDoeDts22BL693GY_FwrsDboz-a1xOIu8hvdCyntSKAmFa.gif>

No virus found in this message. Checked by AVG - www.avg.com http://www.avg.com Version: 2013.0.2904 / Virus Database: 2641/6188 - Release Date: 03/19/13

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/585#issuecomment-15266087 .

[sgtorange]

I agree that the task boxes are too big, especially with the text wrapping for longer named task. Like mutedgrey, I also prefer rounded corner to squared boxes. Simply because the habits,daily,todos, and rewards frames are also square cornered which makes the whole page blend together if you look at it from the top making it harder for the user to quickly navigate between tasks. I believe that habitrpg should be concise and easy to use allowing for more time spent doing actual tasks and less time logging progress.

As for trying to define a style, I suggest coming up with custom border graphics for the category boxes and a more distinctive font set. Kind of out there idea but full undergraphics for the boxes would be sweet, imagine instead of just a light blue box background the rewards section can be sitting on top of elongated full color treasure chest(in 8-bit style of course).

I've been following habitrpg's progress closely for a month and I can't tell you how much I appreciate all the hard work everyone's put in to make this a reality. round of applaud By far the most useful thing i've come across in a while, keep up the good work!

thanks for the polls, very useful XD

[StanLindsey]

On the subject of too colourful I think its too bright really, too much white creating a high contrast between the less bright colours.

[Calae]

Love the new header! Love that I can see my character, pet, level, and username much better than on the other one. And I like the colors, too. Makes it feel more fun, in my opinion.

[wc8]

Would making things smaller be a question of less padding? @lefnire, what if we put an active polls card in the top of the General Features column on Trello? I'll add it, since it can always be archived.

[Shmuel510]

Re: polls... discussion of these issues is currently scattered across platforms (multiple threads on Trello, and here, and possibly other places I haven't found yet?), which I'm only just becoming aware of. I am very impressed that you're managing to stay on top of them all! But I'm not so sure I'll manage to do the same.

Perhaps there's something to be said for having a central polling page with a single link somewhere on the HabitRPG page itself? If you wanted, that central page could have links back to the relevant discussions from which the polls sprang for those who want to delve further or provide more nuanced input.

I realize this would probably be a pain in the neck to maintain, so it's probably an impractical suggestion. On the other hand, you'd be more likely to get a wider range of input? (I would also stress "a single link" above. You don't want to clutter up the page.)

Edited to add: ...and @wc8's comment just beat me to the punch. That sounds like a more easily attainable solution.

[wc8]

Vote for Your Preferences: Links to User Polls, list of questions up for vote, with links to original discussion(s) as well as the poll.

By the way, I like the cheerful shades, though with the combo of size+bright it might be a tad too intense. Did we ever hear back from vision impaired point of view? I just hope we don't end up greyscale and/or black and white. (I ended up quitting an app once partly because the icons were all BW/G and my vision's poor.)

[lefnire]

Yeah, let's do the active polls card