Item Shop Redesign / Mockup

First Riot Post
1234511 ... 16
Comment below rating threshold, click here to show it.

Riot Reinboom

This user has referred a friend to League of Legends, click for more information

Software Engineer

07-05-2011

(Edit Disclaimer: This was written before I was a Rioter )
The current in game shop interface (where you buy Zeals, not where you buy Tanky DPSes) is one of the better made shop menus of the MOBA genre. With that said, this same shop interface seems as though it's falling short of what it could be; there's a lot of wasted potential. I would like to present a few proposals that could tap in to this potential while still preserving the comfort level and familiarity of the interface that is so well established in the hearts and minds of the player base.

I'll address each point in sections.


Item List Navigation
The current item list presents quite a few navigational problems. I've had clicks on magic when I meant magic resistance, clicks on health regen when I simply wanted a health potion, and have even once tried to search in vain for Trinity Force within Ability Power. Each of these issues stem from separate but related problems.

Fast word association when reading top-to-bottom can be slow for most left-to-right readers, especially when such large gaps exist between options. Listing options closer together and listing them across instead of top-down can greatly reduce false associations such as "magic" to "magic resist" as there's a corrective option (defense being right next to it) for the mind to quickly register. By not removing menus, we can also provide easier corrective methods to the user without any increase in clicks required beyond the initial misclick. This would also remove the need of the current back button which, in its current position, adds an incredible amount of time required to some simple searches.

When displaying results in the navigation pane, I've become annoyed at times with the current removal of search features. It's important to preserve outside states (search functions) throughout the course of attempting to achieve a necessary goal (the desired item). Although the current navigation partially accomplishes this by placing a clicked item in the seperated right pane, it ultimately fails to preserve functionality as it accomplishes this by removing its search feature. This preservation of state is even more significant when including a name search filter.

The last feature I would like to see in the navigation pane (although I believe you probably have plans to include it already) is that of a name search filter. My only request here would be that it filters as you type, ensuring instant feedback and the ability to notice errors as they're made.


Current Inventory and Sell Mechanics
The current inventory display has one very frustrating usability limitation: how it connects to selling items. In the current item shop menu, there is a weak disassocation between the inventory and the sell button. This disassociation is increased due to the heavy divider bar between the left and right panes. To complicate matters further, the inventory menu seems to forget its current selection when the champion comes in to range of the shop. All of this together drastically increases time required for selling items. Consider the following example:
Summoner AlexTrebek has six full item slots. The game is close and intense. A large fight finishes and his champion barely manages to survive. He needs to get to the next objective quickly - probably Baron. He wishes to sell his Doran's item and purchase the next large piece of his build. He runs to a bush, hits 'b', opens the shop menu and clicks on his Doran's item in anticipation. He can't, after all, purchase something and then sell it.

But here is what happens: When the teleport back finishes, the shop menu forgets his click location on the item, requiring a second click. In my experience, this is typically accompanied by a mad rush to the sell button only to be confronted by that limitation. In addition, due to the unsure state of selling items as well as that disassociation, the player's natural response when attempting to click the sell button again is now to double check to ensure he has clicked the correct item to sell - costing further time.

Although the current inventory and selling mechanics does offer the benefit of ensuring that users do not misclick as much, I believe that every other portion of the current system causes more harm than the good of this small point. I also believe such a task can be accomplished by other means. I believe more could come by adding a delay to the 'sell' action, and combining this with a direct item association for each number of sell buttons.


Builds: Box
Simply put, the six item limitation of the build box is too limiting. I have read elsewhere that this was more of a UI limitation than anything. I would like to see such a limitation not be worried over as much, and instead have an option for viewing more items that would be user controlled. That is, a "list" button.


Recommended Items
It would be awfully nice if recommended items could change. As this is probably the most requested feature, I do not believe I need to comment too heavily on this point.




Mockup
All that being said, I'm more of a doing person than an explaining person. I also feel hindered by not being able to explain in person. So instead, I have created a mockup that I believe will be able to provide more insight in how I would wish to see the shop menu handled.
I have taken the utmost care in ensuring this shop menu is easily modifiable (e.g. easily changeable tags), expandable (e.g. alternative language support has been assumed with the code), and adheres to both the user and the programmer while retaining familiarity.
I would like to emphasize though that this is still only a mockup and there are many limitations of web browsers that limit it. I have no doubt I could overcome them given time, but these limitations are mostly obvious and don't take away from the mockup enough for me to do so.

Although this will function in Internet Explorer 8, it will look strange due to IE8's lack of various CSS3 additions. It is untested with Internet Explorer 9.
This mockup has been tested and functions with:
Firefox 5, Opera 11.5, and Chrome 14 dev


Primary domain is down right now. Here's from my backup:
http://pifro.com/projects/itemshop/

Version 1 (builds listed where other items are listed)
Version 2 (builds listed under)
Version 3 (various additions based on feedback)
Version 4 (category filtering)

The difference between the two versions is simply a change in how the builds into list button functions. Version 2 is my preference and I am only linking two possibilities in case there is solid arguments for the other idea.

I designed this for 1920 x 1080 resolutions. I have tweaked the styling so that it should scale down smoothly to equivalent of around 800 x 600 however on zoom out with most browser's default page zoom features.

tldr
Click the version 2 or version 3 link.


edit
- Added version 3 with changes based on feedback.
- Added version 4 with changes based on feedback


Comment below rating threshold, click here to show it.

Rebonack

Senior Member

07-05-2011

To put frankly, this is excellent.

It makes the navigation of the item categories significantly faster and allows a player to zero in on a particular item much faster. Some items, like Hexdrinker, are a bit difficult to reach since the quick-recipe bar has been filled full with other AD and MR items.

Should we continue to gain new items a new interface like this will be pretty much mandatory.

Cudos on the hard work!


Comment below rating threshold, click here to show it.

EpicFrogNinja

This user has referred a friend to League of Legends, click for more information

Senior Member

07-05-2011

Quote:
Originally Posted by SweetRein View Post
Builds: Box
Simply put, the six item limitation of the build box is too limiting. I have read elsewhere that this was more of a UI limitation than anything. I would like to see such a limitation not be worried over as much, and instead have an option for viewing more items that would be user controlled. That is, a "list" button.


Recommended Items
It would be awfully nice if recommended items could change. As this is probably the most requested feature, I do not believe I need to comment too heavily on this point.
This is a great idea, I fully support it.


Comment below rating threshold, click here to show it.

Fat of the Land

This user has referred a friend to League of Legends, click for more information

Senior Member

07-05-2011

Excellent work. +1

As I posted in the General thread , to alleviate the concern of filters that combine to display no items (for example there are not items with AP, CDR and Mana), I suggest they be grayed out when one or the other are selected.

Also the filters for each category (defense, Attack etc.) should always be displayed to save time. Currently they default and reset to minimized.


Comment below rating threshold, click here to show it.

Qbr12

This user has referred a friend to League of Legends, click for more information

Senior Member

07-05-2011

This is a great idea and i support its implementation in some form or another.

I do have 1 major issue though, I find it counter to the simplicity of the current shop. One of the biggest differences between LoL's shop and the shops in DotA or HoN is that LoL's is simple and easy to understand. I'm willing to bet that when you played your first game of LoL you had no trouble using the shop, this is because the shop has clearly defined categories and easy to understand navigation. When you want to live longer you buy an item from "Defence". When you want to have more powerful spells you look under "magic". With all these new check-boxes it complicates things a lot. These changes would definitely be better for the experienced players but it would also hurt the noobs.

That being said, I feel this would be best implemented as an optional system. Leave the default as the current shop, and give people the option (in the option's menu) to use this shop instead. Then, when a new players hits level 10 they receive a notification (the same kind of notification you get when you have unlocked a new rune slot or when a new JoJ comes out) informing them that "if you would like a more advanced shop in-game, you can now turn on the "Advanced shop" by checking the box in your settings menu."


Comment below rating threshold, click here to show it.

Yanicmb

Senior Member

07-05-2011

trust me this is well done im sure riot can look at this and build on it for sure and implement it


Comment below rating threshold, click here to show it.

Ymris

This user has referred a friend to League of Legends, click for more information

Member

07-05-2011

I would love to see a category for aura items under "other"


Comment below rating threshold, click here to show it.

Gazow

This user has referred a friend to League of Legends, click for more information

Senior Member

07-05-2011

i think the search bar should always be visible to the right of the shopkeeps icon, that way searching would always be an easy choice


Comment below rating threshold, click here to show it.

Riot Reinboom

This user has referred a friend to League of Legends, click for more information

Software Engineer

07-05-2011

Quote:
Originally Posted by Ymris View Post
I would love to see a category for aura items under "other"
On this demo, I made sure everything was easily modifiable and manageable and that I had an assortment of tags I could modify.

Adding an aura category is as easy as adding a single line of code ({aura: "Aura"}, to be precise) to a tiny database/JSON file.

So any interests in such things I can include easily.

Thank you for the responses thus far!

Quote:
Originally Posted by Qbr12 View Post
This is a great idea and i support its implementation in some form or another.

I do have 1 major issue though, I find it counter to the simplicity of the current shop. One of the biggest differences between LoL's shop and the shops in DotA or HoN is that LoL's is simple and easy to understand. I'm willing to bet that when you played your first game of LoL you had no trouble using the shop, this is because the shop has clearly defined categories and easy to understand navigation. When you want to live longer you buy an item from "Defence". When you want to have more powerful spells you look under "magic". With all these new check-boxes it complicates things a lot. These changes would definitely be better for the experienced players but it would also hurt the noobs.

That being said, I feel this would be best implemented as an optional system. Leave the default as the current shop, and give people the option (in the option's menu) to use this shop instead. Then, when a new players hits level 10 they receive a notification (the same kind of notification you get when you have unlocked a new rune slot or when a new JoJ comes out) informing them that "if you would like a more advanced shop in-game, you can now turn on the "Advanced shop" by checking the box in your settings menu."
I actually disagree with this sentiment.

I understand fully the requirements of an inexperienced mind and the casual appeal this game brings with it. This is actually why I have each category under buttons as to encourage both familiarity as well as not overload newer players with new information.

I've tried to ensure that most of the features I've added are hidden or out of the way enough that it should only take a single game to really become familiar with what you need as a new player or new user.

This is also why I hid the search option under a button.


Comment below rating threshold, click here to show it.

Lhaerok

This user has referred a friend to League of Legends, click for more information

Member

07-05-2011

I want that.. : D
I completely support this idea. However the search bar should be shown always (without clicking the option) aside/below/above the shop window so that is easier to search and find an item.
But I love it! : D


1234511 ... 16