{"id":454,"date":"2010-08-20T18:01:09","date_gmt":"2010-08-20T17:01:09","guid":{"rendered":"http:\/\/www.puppygames.net\/blog\/?p=454"},"modified":"2010-08-20T18:02:24","modified_gmt":"2010-08-20T17:02:24","slug":"revenge-of-the-hud-redesign","status":"publish","type":"post","link":"https:\/\/www.puppygames.net\/blog\/?p=454","title":{"rendered":"Revenge of the HUD Redesign"},"content":{"rendered":"

We’re going to be making a few changes to the buildings\/powerups panel. Here’s the current HUD….<\/p>\n

<\/a>\"\"<\/a><\/p>\n

First of all, and by popular demand, we’re going to add a sell button. <\/strong>Unfortunately there’s not enough room to squeeze it into that bottom panel, as that’s about as wide as it will go on a vertical display – the max width when vertical is shown by the dotted lines.<\/p>\n

We could make the icons smaller to squeeze it in, but some people have also commented on the icons being too small<\/strong> to tell apart easily as it is, so that’s something else that would be good to address as well – magnification on hover being one suggestion.<\/p>\n

There also needs to be a way to be able to hide the buildings\/powerups panel<\/strong>, as it prevents building along that bottom edge.<\/p>\n

So, 2 different designs after the jump…<\/p>\n

Solution number 1<\/strong><\/h4>\n

Make 3 rows for icons rather than 2, and add a thin ‘hide’ button on the bottom edge. The increase in rows gives quite a lot of room to play with, so I’ve spaced out the icons more, and increased their size by 10%. …<\/p>\n

\"\"<\/a><\/a><\/p>\n

… which means there’s enough space around the icons to be able to magnify them on a hover …<\/p>\n

\"\"<\/a><\/p>\n

The extended info panel stays pretty much the same …<\/p>\n

\"\"<\/a><\/p>\n

Pros and cons<\/strong> – the icons are the same as with the current design. The icons, though a tad larger, are still pretty small, and the panel takes up quite a lot of space, especially in extended info mode. The lack of labels on the different building categories may be initially confusing for new players, but on the plus side everything is visible and one click away – making it\u00a0 fast to select stuff, once you know what’s what. Also, less work for me to do on changes \ud83d\ude42<\/p>\n

Solution number 2<\/strong><\/h4>\n

Rather than showing everything on screen all the time, only show each category of building\/powerup as an icon. A hide button is in the top-left corner, though as the panel is now smaller there would be less need to use it. The icons can also be made bigger…<\/p>\n

\"\"<\/a><\/p>\n

Another panel appears when the category icon is hovered over, which shows the category title …<\/p>\n

<\/a>\"\"<\/a><\/p>\n

Hovering over a building or icon magnifies it too, and shows quicklaunch key, name and price underneath …<\/p>\n

\"\"<\/a><\/p>\n

… and the extended info section opens up underneath …<\/p>\n

\"\"<\/a><\/p>\n

Pros and cons<\/strong> – All the icons can be make significantly larger, and yet the whole thing takes up less space. Splitting the categories up like this\u00a0 and showing a category title may make things easier to locate in general and may be easier to get to grips with for new players. On the down side, you’re going to need to do\u00a0 ‘move\u00a0 to cat. icon > move to building icon > click’ rather than ‘move to building icon > click’. And also it’s more work for me.<\/p>\n

So… any thoughts on these ideas, or any other solutions you can think of?<\/p>\n

Here’s some more images showing the progression to come to solution 2…<\/p>\n