Recently I've seen some trends where developers are trying improving the overall look of an application at some costs to functionality of the user experience. Our lectures example of the windows 10 visual update made me realize some of the subtle trends that are catching on with UI developers.
In the old client there same functionality is split up into much more distinct areas. They also have square hit boxes which make them much easier to click on.
The buttons for controlling the windows are integrated into the window. The whiteness of the buttons are hard to distinguish from the picture in the actual window. This loses some functionality for more aesthetic appeal.
League of legends has gotten a similar treatment where the UI has gained some more aesthetic appeal but lost out on some functional benefits. Here is am example of the new client on the store
Here is an example of the old client also on the store screen
The buttons for the new client have some problems. They actually aren't buttons, you actually have to click on the text to change screens. The clickable boundaries are not as concrete as the old client.
The highlighted areas are the estimates for the size of the buttons. This image is a one to one picture.
This is a one to one picture of the old icons. You can clearly see the buttons are much much bigger in comparison. We know from Fitt's law that the smaller buttons make it more difficult for the users to interact with the UI. Furthermore, the new client has grayed out the buttons. It makes it harder for users to immediately recognize what they've clicked on, when compared to the old icons which have some vibrant colors.
Pictured above is a one to one picture of the social messaging part of the program. All the red things being highlighted all actually have different functions when clicked. However when you are trying to click the green dot to toggle your status to away or busy, it's extremely hard because when you miss click and click slightly to the left on the portrait it will bring up an icon selection menu. If you miss click slightly to the right you will instead activate a text box to input a status.
Bibliography:
http://na.leagueoflegends.com/
Comments
Post a Comment