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.

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

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.

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.

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?

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.

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.

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.