v5 (idle).jpg
IBbMM.jpg
v41.jpg
v1 (idle).jpg
Ayouy.jpg
v2 (idle).jpg
v5 (idle).jpg

iLive user interface 1


SCROLL DOWN

iLive user interface 1


 

Creating iLive user interface; a complete
UI compilation for a picky audience.

What is iLive user interface?

It is an interface compilation for World of Warcraft that other players can download and use.

The interface replaces the original World of Warcraft interface with one that focuses on improving your gameplay, professionally.

Although I stopped playing the video game, the project continued and therefore lasted more than two years between its first and last version. I couldn't help it because I enjoyed making it better and better.

Is this UX?

Initially, I just wanted a better interface for myself, so I made it for self-use. But slowly, friends and players requested that I made the UI public. So I did, and this is when it became a product for others to enjoy, and not only me. 

In order to make an interface that supports players to play more professionally, it was all about one thing: Display the right information at the right time. And this is actually pretty hard with an interface that has this complexity. Check it out.

 

 
IBbMM.jpg

iLive user interface 2


You cannot point at any pixel in my UI without me explaining you why it is there, why it has that size, my inspiration and my thoughts.

iLive user interface 2


You cannot point at any pixel in my UI without me explaining you why it is there, why it has that size, my inspiration and my thoughts.

GALLERY

The UI from start to finish.

v41.jpg

iLive user interface 3


It takes skill to cut UI elements without losing functionality. Effectively doing both will feel natural for the user. 

iLive user interface 3


It takes skill to cut UI elements without losing functionality. Effectively doing both will feel natural for the user. 

 

"How can I make it simpler?"

My primary design goal was always asking myself: "How can I make this more simple without losing functionality?" Whenever I released a version, it wouldn't take long before I decided to scrap everything and start working on a new version. For me, it was all about correctly displaying the necessary information.

Below is a journey map. In this case, the map shows the actions, thoughts, feelings, touch points and opportunities for improvement for my UI. I spend 30 min. on the map thinking about how I would approach the UI if I had the chance today. The second image contains all the interactive UI elements (a.k.a. touch points).

 
 
 
 

USABILITY CASE NO. 1

Improving the minimap.

The changes to the mini-map reveal many of the design thinking processes and design goals with iLive user interface. The baseline mini-map provided by Blizzard is skeuomorphic showing a border made out of metals, and for the new player, it is nice to know where all options are like when you have received mail, accessing the calendar, zooming in and out and so on. But, for the player that has played this game for a longer period, all of this visual information becomes redundant.

The changes? All text and icons are removed and have been replaced by integrated functions. For instance, to zoom the user can use their mouse-wheel to zoom in and out. Right-clicking the mini-map opens up search. And in order to see location or time, the player simply hovers the mini-map with their mouse.

Minimap-4_1_0.png
Skærmbillede+2017-04-17+kl.+10.33.35.png
 
 
 
 

USABILITY CASE NO. 2

Minimalistic unit frames.

A unit frame displays information related to individual characters. And there's a frame for player, target, target's target, pet, focus target, bosses, raid, party and so on! Below you'll find my progress with all the versions I released for the player frame. Notice how as the slide changes how less information is put on the frame. E.g. portrait is removed, or fixed numbers. As you play the game, you start noticing what is important to display and what is not. 

If just you'd know how much time I'd sit in front these frames and reiterate.

 
 
 
 
 
 

USABILITY CASE NO. 3

Simpler chat;
all details matter.

Although there are other UI elements that were radically changed, I want to show a final example that only received a small change: chat. How you may think? When you look chat as an individual element, you notice there's irrelevant information that's being repeated. There's no need for chat to use brackets [ ] and show the full name for the channel. Therefore, it's toned down to a single letter.

Remember, the users of my UI are experienced players, and once you've chatted once, you know "w" will mean whisper and "td" will stand for trade.

Before

[2. Trade] [Designit]: We will invite Caglar for a job interview.

or

[Whisper] [Designit]: Yes we will

After

td Designit: We will invite Caglar for a job interview.

or

w Designit: Yes we will.

 
v1 (idle).jpg

iLive user interface 4


I can make solutions that users don't know they need until they see it.

iLive user interface 4


I can make solutions that users don't know they need until they see it.

PROTOTYPE TESTING

Using recorded footage to
make newer and better versions.

 

In order to find new ways to improve my UI or see if it worked as intended for my users, I would ask them to upload videos of themselves playing. This became very purposeful because over time I learned my users weren't always able to articulate if something was wrong with the UI. Something very interesting would be if the users would modify the UI like remove some features or add some of their own. Because, if it's modified, is there something wrong with it?

From this video, I learned that the user had misunderstood what the action bars are for. And I am not even sure the user knows that I have made invisible bars on the top left. Furthermore, he is entering his character panel [see 02:01] and delaying his gameplay. So I made this visual guide to help users understand bars more easily. I also learned that there were some errors like double combat text active and that this user had downloaded an add-on to my interface (the combat data in the bottom), so the next version had one. 

 
Ayouy.jpg

iLive user interface 5


When I am passionate about a project, others will be too. So I make sure this is a part of what I am doing.

iLive user interface 5


When I am passionate about a project, others will be too. So I make sure this is a part of what I am doing.

RECEPTION

I kept updating the UI. Not only because I
enjoyed it, but because my users loved it. ☺️

Wow that look amazing! Exactly what ive been looking for a couple of weeks. So clean. Mind sharing it? · Really like it, really does look clean · I love this UI · Hey, I absolutely love this UI, for all toons, but especially my healer. It's wonderfully clean and efficient · great work, slick as!!!· Hi, i just downloaded Ilive and i can just say that on the pictures i love it · Hey there. I love this interface. Very easy to set up and looks great. · Thanks for the great UI! · Hi iLive, thank you for a great Compilation · iLive, been using this s ince you created it. I love it. · Hey there iLive, just trying out your setup for the first time and so far I'm loving it · Ilive when are an update comming for 4.0.1 patch. I really really want to play with ur imba addon · Thank god, i was getting worried you had dissapeared · I gotta say, I love the UI. · Hi there iLive! First of all i must say i really love your UI package, its clean, its simple and its easy on the eyes · Great Interface · This UI is the best I have ever seen · Thanks a lot for the help iLive, really helped me out of a pinch there! Keep making your UI's look awesome and i hope you don't run into more tards like me . I didn't mean to embarrass you of course. I play very very casually and this UI has everything I need. It is lovely and clean. I am quite picky... but this one is it for me · I love it ! · using it now, and now its permanent <3 · I totally dig this. Please make support for 1440x900 resolution · love you long time · Well, I will be downloading this and using it this week. I've been checking your other thread and dying to try this out. · So you are still creating those awesome UI's of yours I see · Yes, your UI seems very clean… · Looks awesome, · Very nice UI, I am especially fond of the font and currently using it with Kripp's UI. · Hey there. I love this interface. Very easy to set up and looks great. · Looks nice, good job! · FINALY iLive · <3 love you so much thanks now i can play wow again .D · Just popping in to say keep up the good work · so far love the UI thanks.

Source 1 (Wowinterface) - Source 2 (MMO-Champion)

v2 (idle).jpg

iLive user interface 6


When you dissect a UI, and start seeing components and elements individually, it is easier to find new and better combinations.

iLive user interface 6


When you dissect a UI, and start seeing components and elements individually, it is easier to find new and better combinations.

Q&A

So you want to work with video games?

No. This is a common misconception people believe when they see this project. I really want you to understand that this is a platform that heavily relies on a good interface for the gamer to be able to perform well, and in order to make it great, the designer has to consider many factors and know what the user wants. So it is actually very UX!

I see this project as the picture to the right is displaying. There's a user, and there's a product, and in order for these two to communicate effectively, I have to design the system (interface) that will make these two interact in the best manner. And as a designer, I will draw, ideate, prototype, interview, test, etc. until it is just right.

 

What differentiated your UI from the other UIs?

Instead of looking at the screen and thinking "how can I make this visually appealing" or "cool", I would go back and really think about what information an interface should convey to benefit the player in terms of combat efficiency. I spent a lot of time looking at pro players playing, and then analyzing what they had in common, and how they differentiated themselves from novice players in terms of their user interfaces.

It wasn't until I did this that I was able to really think outside-the-box and make interfaces that were more original and innovative. I didn't want to create a  beautiful painting that you could look at when you were idle. My genuine interest was always to solve the problem; not its symptoms.

What does your UI have to do with UX?

This project shares many of the same processes concerning improving the experience with it like it would with a regular UX project. Without knowing it, many of the decisions and processes I did back then are basically what I am learning to do now as a Digital Design student. Instead of making a pretty interface, I would use a lot of time to try to understand what the true problem is rather than trying to fix the symptom of the problem. And that requires time spent on researching.

 

What inspired you?

All kinds of UI design. I not only was inspired by other interfaces made by other users but also UI designs on other platforms. 2009-2011 was particularly a time where flat design was becoming more widespread than skeuomorphism (see picture to the right). You know, instead of seeing interfaces using real materials they would be simple and flat. So you'll notice how my interface e.g. becomes more and more flat.