UI Doodle

I was using a Yelp iPhone app the other day and bunches of ideas came rushing through me so I’ve decided to do a redesign. Since I have a vacation to prepare for, I only got to do one page but I think it came out pretty good. The page I tackled is business page. Here’s the current screenshot.

It’s very basic with system page style design elements all around. I also have tough time figuring out where things are sometimes due to lack of visual anchors. I think brand style can be better integrated and some infos can be shuffled for better user experience. So here it is.

I mimicked the colors of the logo for section headers,  added some visual cues, brought in some fresh thin fonts to reduce the visual space of texts. I brought out some of the key infos from the information page and converted them into easily recognizable icons for quick scan such as whether this business has menu, wifi, or happy hour  I removed the containers since it only uses up more horizontal space, and pushed down the checkins, which I don’t believe is more important than address and phone number. Overall, I’m pretty satisfied so I’ll finally give my hands some rest for today.

I picked up a game called Skyrim a month ago and I haven’t been able to move onto another game so far. Breathtaking visuals, addictive gameplay and great storyline teamed up very well together to obliterate my social life. Nothing’s perfect in this world tho and this game still being of this world, I find myself finding moments or elements where it could be done better. So I thought I’d give it a try at my first game UI doodle.

First and biggest issue I have with this game (coming from years of playing Wow) is the lack of fluidity in combat. Coming from WoW where I had dozens of spells at my fingertip through a single keyboard/mouse click, I felt like I’m playing with my arms tied behind my back. It also probably didn’t help that I went from playing WoW on PC to Skyrim on PS3 where there are very limited set amount of buttons, lot less than keyboard and mouse combination.

So here’s my sample scenario of a combat. I first decide how I will fight this opponent and prepare accordingly. Often times, that means changing the equipped gear (you can equip one spell or weapon per hand except for big weapons and bow) which involves opening a favorites menu and selecting the item from a preselected list of items. Another way is to open up a full menu, choose spell or gear, choose category of spell or type of gear, then selecting the item. It’s not a quick process by any means, which is why one can be convinced to ‘favorite’ lots of spells/elements.

Normal menu process for changing gear/spell

But then that creates ANOTHER problem. Long list of “what the hell was this?” situation. As you add more and more things to favorites menu, that list becomes overwhelmingly long and since this list doesn’t show details of the item, you have to know exactly what each item is just from a name. Can’t remember if that specific fire spell was called Firebolt, or Fireball, or Flames, or Incinerate, or Fire Breath? Well, you have to either just pick one and possibly waste magic points on spell you didn’t really want, or exit favorites menu, go back to full menu, and find the one you want, which kind of defeats the purpose of having a favorites menu. Now imagine doing this before battle, couple times DURING the battle, and after the battle. And that’s for one battle.

Another problem with the shortcut menu is in its organization. There isn’t one. You can choose to shortcut pretty much everything including your armor, weapon, spell, dragon shout, potion, scroll, etc. which creates quite a chaos in your favorites list. You probably noticed if you’re an avid Skyrim player but when I listed fire spells above, one of them isn’t actually a fire spell. It’s a dragon shout which uses different resources and different button to activate. In addition, unlike spells and dragon shouts, there are a lot more variety of gears and consumables you can pick up throughout the game which players will have very hard time trying to remember their names of. So chances of them getting recognized in the favorites list is very slim unless the name is very descriptive.

So how can this situation be improved? I have to say, it was quite challenging trying to squeeze in more functions to same set of buttons. I have a new found respect for console game UI folks now that I struggled with this for few hours. I came across few novel but flawed ideas but in the end, I found one that would noticeably improve without any disadvantages.

Current control scheme

Current favorites menu

First change is very small but I believe it’ll still make a big difference overall. It is my assumption that there is usually around 3 different player mode. 1 – Range attack mode. 2 – Close combat mode. 3 – Oh crap / that-was-good-battle-now-lets-prepare-for-next mode. Skyrim being such versatile game where player can be anything they want (which I love most about this game), I bet there are lot more modes people would like to go into but overall, I assume those are the 3 core modes. Myself for example, equip Bow to initiate battle from afar, then change to fire spells when the opponent gets near, and change to healing spells when I’m in trouble or after the battle. That’s a lot of going in and out of menu during one battle. There’s a shortcut (left/right button) that allows you to switch between 2 favorites instantly but because it’s between just 2 favorites, I find myself not using it very often. Instead, I think a Set Shortcut would aid gamers much better in battles. Assigned to left/right/bottom button, it would allow players to assign a set of gear/spell/shouts to one of those buttons, letting players instantly change between 3 modes in the heat of a battle. In my case for example, I can assign left button to Bow, Aura Whisper (dragon shout to detect opponents to initiate combat with), and armors that increase bow damage. Then on bottom button, I can assign fire spells, Unrelenting Force (dragon shout to push enemies back in battle), and magic-focused armors. This allows much more fluent combat and it prevents gamers from playing with a same weapon/spell for prolonged period of time due to laziness of changing them through a long set of menus.

Even with this change, players will undoubtably come across occasions when they need to access potions or alternate spell/gear. So we do need to tackle the favorites menu regardless and here’s my solution.

New control scheme/favorites menu

Instead of one tiny list, there will be TWO tiny lists! Instead of having everything stir fried into one tiny list, it should be neatly categorized so player can easily get to what they’re looking for. For left list, there will be spells and shouts. Since there’s nothing assigned to left/right button, left button will be used to toggle between the two list on the left side (with overlapping animation). On the right side, there will be gears (armor/weapon) and potions with same global toggle using right button. Scrolling the list will be done by left/right analog controller with each controlling the appropriate side’s list. Now when player needs a potion, they don’t need to scroll through piles of spells, shouts, and gears. They just look to the right and scroll through potions!

Although they seem very minor, I think these couple changes would make the gameplay lot more fluid and intuitive, encouraging gamers to get more in-depth in battles.

—

Behind-the-scene fail
I thought of this idea where left/right hand action button’s full-press (controller recognizes how hard you pushed the button) triggers an on-screen menu of quadrants on each hand where you can assign favorites so you have 8 items instantly accessible but I later found out there’s already function assigned for full press on action buttons for certain occasions. >.<

Originally amazing but eventually flawed idea

So I just got a new update for my Google+ app and noticed they changed their icon. It used to be a black icon with small color tabs, which I thought kind of came out of nowhere since they don’t have prominent black in any of their apps. But the new one is even more odd in their design direction.

Above is the new Google+ icon. Prominent red. When’s the last time you used a Google app and thought, “wow, that’s red”? I’m guessing none because you’re busy thinking “wow, that’s blue!” It’s complete departure from their typical color theme of either blue, or all the colors together. Even the position of g is brand new, not centered like Google app icon or left aligned like Google favicon.

But here’s the best part. I had to read through Google’s Android design guideline recently and this logo reminded me of something from there. If you go to Launcher Icon Guideline and scroll down to Do’s and Don’ts…

you’ll clearly see that cropping is a big no no in Android world. And their direction is properly reflected in all of their app icons, both in Android and in Google.com…except this new logo.

My best guess behind this move is probably not about the Google+ itself but where it stands among the competition. If they have to sacrifice little bit on inner identity to stand out among outer competitions, especially considering their current market share, it’ll be a good business move. Standing among blue Facebook icon, blue Twitter icon, blue LinkedIn icon, and blue Foursquare icon, this icon definitely will scream out loud “PLEASE STOP IGNORING ME!” But I highly doubt that’ll be enough to drag grandmas and computer illiterates who JUST finally finished creating a nice butt grooves in the cushy Facebook sofa.

I first came across this odd issue through a usability test result few weeks ago where people complained about the legibility of text on the buttons. Upon close inspection, I found out it was a weird kink with Chrome’s rendering of text shadows. Normally, when you apply shadows on a text, shadow starts from the edge of the text and goes outwards in direction specified. In Chrome however, it appeared to be starting from the center of the edge (think of Stroke layer style in Photoshop where there’s position value of inside, outside, or center), making the text thinner. This effect is most evident in smaller sizes where percentage of the text area occupied by shadow is higher.

Thankfully, amazing coder friend of mine Ann, managed to figure out a solution which seemed to work perfectly. All you have to do is add an extra line of code in front of text shadow value. So if your original text shadow code is like below,

text-shadow: 0 -1px 1px #ccc;

you just need to add an extra line like below.

text-shadow: 0 0 0 #fff, 0 -1px 1px #ccc;

You can see the end result below.

I’m amazed there are still user interfaces out there that has icons with no tooltips (display of description when hovered). It’s such a simple easy thing to implement that makes world of a difference yet people still get lazy and assume everyone will understand exactly what each of those icons mean. I’m sure you’ve worked pretty hard to implement whatever feature/pages those icons lead to.. don’t they deserve a proper marketing?

I got a logo request from a good friend of mine (who happens to be quite a genius) so I decided to give a logo design a whirl after a long hiatus. His site is called Golden XP and he wanted to incorporate an infinity symbol. So here’s the first draft. Let me know what you think.

Email account I’ve had for the longest time is my Hotmail account. Even though it is now as “uncool” to use one as @aol.com, I find it’s tough to throw away like an old high school yearbook. So as an old-friend-ly gesture, I decided to do a quickie UI doodle. Here are some key issues I found.

Although I do find some hint of hipness with the Microsoft’s new super-simplified, mostly-text art direction, it really gets in the way of good usability sometimes. Art can be above function in many places but application is definitely not one of them. So here’s my quickie doodle.

It already uses blue color for New folder function so it made sense to match the color for a new email function. Also by keeping the common actions nearest to the email list, I saved the travel time and patched up the feeling of disconnect between the actions and items actions are being applied to. I lightened up the filter options to lower its priority and decrease the clutter in the area. Overall, this layout makes more sense in terms of priority and usability. What do you think?

Coming from Korea where I’m spoiled in the flexibility of written language, I can’t help but feel little bummed when I have to write English vertically. It’s terribly tough to comprehend (is that an I or l or vertical dash?) and visually unappealing and unbalanced. So the next best thing we can do is to write regularly on a vertical path. But which way? Well, it depends. Here are four variations and its best use cases.

1. Left side, upwards.

This setup is one of the easier layout to read. You just tilt your neck and start reading as normal from left to right. Your eyes also end in the top left of the page, allowing easy transition to the rest of the page. This will work great for a link to another page that has medium to high importance.

2. Left side, downwards.

This setup is more traditional which people may be more familiar with. It follows the same direction every book out there uses on its spine. It uses the logic of how all our writing reads from left to right, top to bottom. It also allows all your contents to start from the same top left area. This setup works great as a tab that pulls out additional content underneath, becoming a header for the contents below.

3. Right side, upwards.

This setup is most awkward since it doesn’t follow traditional reading direction nor easy to read direction. It is however the best choice if you have contents sliding out from the right since content header should always lay on top of the content to better visualize the relationship.

4. Right side, downwards.

This setup provides both easy-to-read facing and a traditional top-down direction. Placement however ends up on the outer part of the user’s typical reading path (diagonal from top left to bottom right) so it should be used for a low to medium priority feature.

There are also several things you can do to improve the legibility of your vertical text.

1. Don’t use UPPERCASE text. It’s already hard enough to read vertically. Don’t fan the flame.
2. Don’t use serif fonts. Serif creates more visual clutter.
3. Include an icon/symbol to give a visual hint of what it’s about. Allow users to guess without reading it.

As a UI designer, I work with shapes in Photoshop everyday. It allows flexibility of a vector without leaving the comfort of Photoshop. It’s delicious. But it’s not without its flaws. Here’s one that still gets me sometimes.

Here are two boxes. Let’s pretend these are custom fancy buttons I just created. Developer is asking for a dimension so I ctrl-click on the button layer and get the dimension off of the info panel. It says 202px. Awesome. Now I slice the image out and send it over to the developer and five minutes later he comes barking at me saying my image is not a proper size. WTH? (this actually happened. >.<)

This is all thanks to amazing ways anchor points can lay in between the pixels. Left/right edges of the bottom box is actually just-ever-so-slightly off the pixel line, which can happen quite easily during a typical design process. So even though it doesn’t look like it’s taking up that extra 1px left/right, it is. And when you ctrl-click a shape, it counts every pixel the shape is creating that is 1% opacity and above.

So how do you avoid this mess? Couple things.

First check the Snap to Pixels in the custom shape pulldown so when you create a shape, it always snaps to the pixel line. This however won’t let you snap to pixels when you’re moving anchor points. For that, you need to get yourself friendly with a menu item called Actual Pixels under View. (make a shortcut key for this immediately if you’re a UI designer) It zooms your comp back to 100% where every left/right/up/down arrow keypress, while your anchor point is selected, equals 1px. This is the only zoom percentage I know where you can get a proper pixel snapping. Once you leave the 100% view, your same arrow keypresses end up equaling fractions of a pixel, creating those half-opaque shoddy edges. If you already have a shoddy edge and you want to fix it, best way is to select the anchor points and zoom in to max percentage and move the points till it’s exactly on the pixel line.

So there you go. Now you can also have straight clear edges on your shapes without using rasterize/pencil tool. Hooray for all.

Generally, I’m not a fan of animation in user interface. It wastes precious seconds off of usage time in the name of style yet it often ends up being more distracting than beneficial. But as always, there are some exceptions. I came across one while using Google Analytics.

In the main reports page, there are couple menu item in the grey bar called Advanced Segments and Export. Although it looks like they’ll evoke a pull down menu (since the same menu style above called “My Conversions” does exactly that), it actually expands the grey area to display more contents. When I first clicked Advanced Segments, I was confused for few seconds as if somebody spun me around and then had me face in a new direction. This is my theory.

As you can see in the image above, our fovea (angle at which we can focus on moving object or focus on an object while we’re moving) is only 2 degrees. Activities outside of that angle may still be noticeable through peripheral but not with the same amount of clarity. So I had to brush up on trigonometry to figure out some measurements.

tan 2° = fovea height on the monitor / distance from the eye to the monitor

After converting the solution into pixels, it comes out to about 90px. I also tested with laptop use (1ft distance instead of 2ft) and result was about the same at 90px.

So if you have any change in content happening (especially instantly) in an area larger than 90px by 90px, people won’t be able to track them clearly. And that’s what happened with the Advanced Segments pulldown. By showing a new content the size of roughly 800px by 200px INSTANTLY in the middle of a page, you’re forcing users to pull themselves back and reanalyze the page layout to properly grasp the boundary of the new content. Just by adding a simple brisk pull down animation, you can guide the user’s focus from the area of the interaction to the edge of the new content area, allowing them to easily digest the change in the page.

Work was quite intense past couple weeks with end of quarter events and end of year events colliding into a chaotic supernova. But it is finally here. Facebook optimized. I decided not to go in the direction of ‘redesigned’ since I do want to contribute something useful, not something that ‘looks cool’ but not implementable. Current Facebook design is quite lean and mean that it was really hard to find ‘easy wins’ so to speak. Every change I thought of seemed to create other issues. I’m sure this version ain’t perfect but I hope this brought some new perspective. I’ll add few additional notes on this project later this weekend. Let me know what you think!

I just got an invite to Google+ and have been fiddling around with it all day. Now when I go back to Facebook, it feels so dated. Not only that, Google+ just went against many design direction I was taking with Facebook redesign and it looks good. Damn.. should I stay or should I go…

Facebook uses ONE font size for all texts on the main page except for one area. (Header with Title/Top News/Most Recent) Wow.

This Facebook redesign is even more challenging than I imagined. Everything I tried to change so far, I’m finding good reasoning why it is how it is. Even the awesome looking redesign that’s already out there has its own issues which I can’t overlook. We’ll see if I can overcome this wall. Afterall, nothing is perfect.

I’m gonna challenge myself to a redesign of Facebook’s main page. I’ve been always bothered by huge waste of space once you scroll down and it’s something most people are familiar with that anyone can give a decent feedback once I’m done.

So here’s a rough initial assessment.

Couple big issues to tackle
- Giant waste of space on left/right once you scroll down. And the worst thing is, that wasted space gets bigger with widescreen monitors, whose market share is steadily increasing. Currently, more than half of the monitors are widescreen with 19″ WS at the top of the hill so huge amount of unused horizontal space is a huge friggin deal.

- Responses to posts that gets in the way. Because responses are on the same path as the rest of the post, they either have to hide them or show them and increase the scrolling distance to the next post. There needs to be another path for the comments so there isn’t a price to pay to read them.

Hurdles
- Variable sizes of modules. Fixed sizes are always so much easier but there just ain’t gon be that luxury here.  Menu, thumbnails of people online, events, friends you may know… they all can vary in sizes so that needs to be taken into consideration. Sure I can pretend they’re all fixed size and make a beautiful comp but then it won’t be very challenging or useful to anyone.

- It’s pretty tight already as it is. Facebook didn’t make the mistakes of Digg or Gizmodo by doing a radical redesign. This thing has been fine tuned for as long as I can remember, and I’m sure there’s reason behind every element on the page. For example, I know how much people hate Top News (I hate it too and never use it) but I understand it probably helps a lot in retaining less savvy users by making their timeline appear more meaningful and entertaining. If a grandma opened her Facebook once in a while and all she saw was bunches of ‘who friended who’ and boring one-liners, she may not sign back on in the near future. By making that a default view, it’s allowing those people to see the timeline how Facebook wants them to see. You always have to give the savvy people option to change, not the non-savvy folks since they probably won’t find it.

Alright, enough talkin. If I’m gon show half-decent stuff, I best be workin.

When iPad 2 was announced, one of the most common complaints on the web was “no Retina Display?! WTH?!?!”  And if I wasn’t in the app interface industry, I probably would’ve joined in. That thing looks gorgeous! Of course Apple should put that in everything they sell from iPod Shuffle to their headphones. But sadly, things aren’t that simple.

Current iPad resolution is 1024 x 768. In order to come close to Retina Display, it’d have to double its resolution to 2048 x 1536. That’s a lot of pixels. My monitor doesn’t even have that much pixels and it’s 21 inches! So imagine designers and developers having to create iPad Retina application on average 19″ – 21″  monitors. They’ll either have to invest on a huge 27″ monitor (how convenient that’s the new monitor sizes from Apple) or never see the application in full size/full screen on their monitor while creating, which is a big risk. Considering iPad’s app store is still in its infancy compared to iPhone app store, Apple weren’t about to throw what could’ve been the biggest wrench in the developer’s production timeline.

Sadly though, for developers and even more for designers, it seems Retina Display IS coming. And with it, probably increased sales of 27″ iMacs and CinemaDisplays. So if I were an iOS app designer, I’d start getting friendly with either vector tools in Photoshop or convert to Illustrator.

So I came across this handy trick today while looking for a iPhone app prototype program.

http://www.adobe.com/devnet/fireworks/articles/prototype_iphone_app.html

Previously, there haven’t been a big need for a prototype at my work and when we absolutely had to see it somewhat in action, we would just upload several comps and slide back and forth in the Photo app. This trick makes it pretty easy and fast to create functional prototype you can actually interact with on iPhone. It took me a bit to get setup at first due to one issue that wasn’t noted in the instruction. On Fireworks CS4, when you create a new page, it’s called page 1, page 2, page 3, etc. Instruction tells folks to rename first page to index but doesn’t say anything about renaming the other pages. Come to find out, all the pages after that must not have spaces in their names (so page2 instead of page 2) or it won’t work. You almost must make sure all the links are going to proper pages that exist or you’ll just get a blank screen when you click that link. Overall, it does the job and does it pretty well and for free!

I’m gonna start this with a quicky wordpress doodle since it just wasted 30 min of my time and almost had me switch to crappier theme. I’m not quite sure if this is due to wordpress or the theme maker but the order of the widget was quite funky. It’s such a tiny issue yet it managed to stop a web savvy person like me in my tracks.

Sandwiched between Flickr and Vimeo, I had no idea there was a widget for Posts, which is required to display any posts on the homepage. Second issue is one I hold dear to my heart since no laptop companies have yet to perfect one finger dragging on the touchpads. There is just no easy efficient way to drag and drop on touchpads. You either have to click the button with a left hand finger and drag with right hand finger multiple times till you reach your destination, or you have to double click and hope that your touchpad is big enough to hold the distance between your origin and destination. And then there’s issue of OS not recognizing your ‘drop,’ forcing you to continue dragging when you thought you’ve already dropped and try to move your cursor. There are just way too many chances for error to justify the use of drag and drop as only option. Mouse ain’t perfect either. I still remember how my parents had to concentrate fiercely as if they’re tightrope walking whenever they had to drag and drop. So here’s a friendlier version with more than one method to achieve same action.

Finally, it’s up and running!