Forums » Suggestions

Revamped UI (The UI is crazy guys, here's a better one.)

12»
Oct 27, 2008 evoros link
A story of many lonely nights in overhauling the VO UI.

1.0 Background

It seems the subject of the user interface has been silent for a while. The last serious threads I saw about it were LeberMac’s from 2005 here:
http://www.vendetta-online.com/x/msgboard/3/11492#243587
and themnemonic’c from 2007 here:
http://www.vendetta-online.com/x/msgboard/3/17502#220349

(No need to read them I will sum up)

LeberMac’s seems to have been the basis for many features today (which I applaud and inspires me that I too, could make a difference today) and themnemonic’s points out a lot of concerns with the current implementation, which makes using the interface much more difficult than many people think is normal. I agree with just about everything themnemonic had to say, and some other posters in his thread. To sum up:

- Menus are confusing since there are too many (3) levels.
- Multiple ways to do the same thing are actually becomes confusing to remember how to do what you want.
- We want access to buying addons on the same screen as equipping them.

2.0 Motivation

I’m not sure why nothing (?) from these ideas were implemented, save due to Incarnate’s comments:

“I agree the station menu is not laid out the best. I'm focused elsewhere right now, and have no one else to really work on it, but I welcome feedback, mockups and ideas. The challenge is keeping the really useful stuff available quickly for veterans, while also making things intuitive for newbies.”

OK, I can work with this. In fact, I can make a UI where “useful” and “intuitive” aren’t mutually exclusive. Still, if good ideas weren’t implemented before, how best for me to be an agent of change? Maybe it was themnemonic’s recurring theme of including background art that was intimidating. Maybe there were no concrete, example mock-ups? (By the time I got here I couldn’t access most of the links, so I really don’t know.) Either way, I don’t want my annoyances to fade over time into begrudgingly desensitized acceptance. I want to strike while the iron of my vexations are hot, while they are burning clear in my mind.

So, to circumvent as much possible opposition and git ‘er done as soon as possible, I set out to propose a design that would have minimal drain on resources. No fancy background images will be required. No existing functionality will be stifled. No new game engine or UI technology will be required. I will piece together a better system with only what exists, and create actual concrete mock-ups that can be used as blueprints right now.

3.0 Introduction

The result? I have effectively dissolved at least one, in some cases two, levels of menus from the user interface. I have merged different functionality into unified consoles, making it easier to find and do what you want within the UI according to your use case. I have created some concrete mock-ups using actual screen shots of in-game menus, which are then sliced up and hashed together. (Brace yourselves, these are extremely rough, I have zero image editing skills, and I did all this in MS Paint.)

“Preposterous!” you say, “You could never fit so much information in so few screens!”

Good point, Jimmy, thanks for bringing that up. I did the mock-ups precisely as a tool to eventually demonstrate, but first prove to myself, that the dimensions for all windows and text would be feasible. They’re also a way to identify potential trouble areas. You will see what I propose is quite possible and there is definitely enough screen real estate to pull it off. Now, the importance I want to convey with the mock-ups is the design, the locations and the combinations of windows that I have laid out. Tweaking with sizes, alignments and styles etc. can and should still be done, so I hope you will be able to see past the crude image hack and slash and understand the real information beneath. As we go, I will accompany each mockup with text to touch on each design decision and explain the merits of each screen compared to the current UI.

Devs, pull up a chair, grab a redbull, java-latte or whatever it is you kids enjoy these days, and I hope you enjoy the show. I invite you to review the following, new and improved, VO UI.

4.0 Mock-Ups

Here are the mock-ups illustrating the revamped UI. If you can simply glance at them and decide that you like them better, great, my job is done (possibly). Otherwise, or if you feel like investigating my very technical and in-depth descriptions, please read on. Feel welcome to point out any oversights or make suggestions.

All the compositions are 800x600, derived from actual screenshots of the game at this resolution. That and some crafty MS Paint skillz. I wanted to use the smallest resolution just to be on the safe side of the “everything can fit, honestly” fence. None of the text is stretched or distorted, only sometimes edited, and each time I will point these out.

4.1 Ship Console (Default View)


Figure 4.1 – Default view of the Ship console.

My most important modifications center around the Ship menu. This is where most of the action takes place for me, and I suspect most new players. Figure 4.1 is the first ‘view’ of the new Ship menu, or console, as I would like to call it. The screen resets to this configuration every time you click on the ship console. (When the UI is task oriented and complete, you don’t need to bounce around between menus anymore and the benefits of caching the last view of your menu are diminished. Instead, with the new UI I would trust that a player could begin and complete their entire thought in one visit to the Ship console. Any navigation away then returning would be to start a new thought, hence return to the default view.)

4.1.1 Console Bar

Firstly, you will notice I have removed the top and side menu bars, and replaced them in favour of one, universal, bottom menu bar. The main thing here is that there is only really one big menu bar, and that eliminating the right menu bar reclaims a huge amount of space. The bottom of the screen just seemed a more common and appropriate place for a bar of such importance (most MMOs, Windows taskbar, etc.). It could go back up at the top, where “Ship, Commerce, PDA” used to be, but you will see I have absorbed that space into the chat window to add that extra line or two and bring the chat box aesthetically into conform with the panels in the top right corner.

The console bar is predictable; the buttons Welcome, Ship, and Commerce open to their new, modified consoles, while Help and Launch act as normal. The yellow letters x, y, z, etc. signify a user’s custom shortcut bindings for these buttons, which should phase out all uncustomizable menu hotkeys. More on this in section 8.2.

You will notice the absence of the PDA option, this is explained in section 7.0.

The style is just a placeholder so doing the “overlapping tab” style might work fine, if not a bit gaudy for such a system-tray type bar.

4.1.2 Item Description Panel

Also removed from the right side of the screen are the buttons Set Home, Launch, and Options, and most of the information from the quick reference panel, such as ship name, cargo load, mass, and home sector. The rationale for this is that the UI is being designed to be efficient; It will always give you the appropriate information when and where you need it, but it will use the space more effectively otherwise. (After I realized that I never even looked at that panel except to see my credits, it seemed suspiciously like a creative way to find ‘use’ for otherwise dead space, thanks to the previous right menu bar.)

Instead of the right menu bar, I have placed a large, aligned panel used to display item descriptions. This is the same size panel as in the commodities sections. The main purpose of this is to allow for ample space to comfortably see the complete tactical details on all ships and addons. This allows for much easier query and comparison, as before ship descriptions were cut off at 8 lines, and addon descriptions cut off at 6 lines within the ‘Manage’ section.

Credits and Licenses are displayed at the bottom. Credits for obvious reasons, Licenses so that you can remind yourself exactly why those items in the store are red.

4.1.3 Ship Selection

On the very left side, I have placed the ship selection window above the 3D ship model view. The most striking compromise here is the 3D model space has been reduced. The styling here, the precise dimensions and the model zoom can be tweaked, however the model displayed is full size and still never touches any of the window borders as it spins. To rebuff possible complaints about a smaller/more constrained avatar view, there is still a Maximize button that might see more of a purpose now. The Maximize button is placed in a more Windows predictable top-right location. (Is Linux/Mac the other way?)

The ship list is one line shorter than we are used to.

The Configure button leads to a change in the window described in section 4.3.

Beneath the 3D model, I set up the repair and refill options similar to the welcome screen, At the time I made this, I didn’t know the prices showed up dynamically with the usual buttons. (Heh, multiple ways to do one thing…) Either way will work fine.

4.1.4 Items Column

The middle of the console has a modular section that tabs between View Cargo and Buy. View Cargo could be chosen as the default tab. The purpose of these tabs are to grant access to all item resources in the game while you are in the middle of trying to outfit your ship. I found it very annoying that I had to navigate complete screens between buying and equipping addons. The View Cargo tab is explained in the next section, and the Buy tab is explained in 4.2.1.

4.1.5 View Cargo Tab

The most impressive feature here is that I have placed a window for both station cargo and ship cargo in tandem. This way, you can equip things directly from either place of storage, avoiding possible unloading hurdles, and immediately control where to leave any swapped out parts, or even sell them. The purpose of these additional features are that they are a common use case. Upgrading your addons will always result in choosing how to ditch your old ones. Arriving at a pirate base or mining station may naturally lead you to unload your holds so you can retrofit your ship with those illegal weapons or mining equipment. Previously, you had to navigate to new windows (through the menu maze) in both cases.

The width of these windows are the same as those used in the Ship > Manage > Configure Ship > Addons section (whew, a clickful!). Since I wanted to have the sell functionality present, I actually experimented with adding the price column, but the lines became too packed. However, the sell prices should still appear in the full description box, just like in the old commerce windows.

Load/Unload and Sell buttons have been grouped in opposite corners to positionally reinforce their separate purposes. A terse stack splitting counter rests in between. In fact, one single row of buttons could be multi-purposed between load and unload to save space by being context sensitive (like the ammo/repair button), but the confusion is probably not worth it.

In other context sensitive news, double-click needs to be assigned the default action of loading or unloading to the alternate cargo window. Moving items between ship and station cargo should also be supported by drag and drop; the windows are placed close together to facilitate this. Shift-clicking or right-clicking should activate some method of stack splitting with the mouse.

4.2 Buy View


Figure 4.2 - This mock-up shows off the buy view.

4.2.1 Buy Tab

From this tab you can buy new addons from the station, without leaving the rest of the configuration options behind, and without breaking your train of thought. All the old Ship > Buy tabs are here, only with condensed names.

I have made all items single line to show more items in the list. Also because, the secondary line is disorienting and unnecessary within the context of the list, but could be preserved within the data panel.

When you click on a ship under the buy menu, the 3D model will switch to that ship, and the repair/ammo buttons will be replaced by the colour swatch, as depicted. As soon as any other item is clicked, the 3D model resumes to your currently selected ship, with the repair/ammo buttons. The colour swatch has been stretched to the borders of the 3D window to make it easier to select the cells.

Again, the improvement here over the old way is that both the buy ship list and the data panel are much bigger and allows you to look for and compare information easier than before. Furthermore, the panels stay in a consistent location across all functionality making your experience less confusing.

4.3 Configure Ship


Figure 4.3 – The remaining, configuration views of the ship console.

The two new elements are the Equip Ports window, explained next, and the Weapons Groups window explained in 4.3.2.

4.3.1. Equip Ports

The leftmost panel containing the top view of the ship appears when pressing the Configure button featured in 4.1.3. This is similar to the Ship > Manage > Configure Ship of old.

I have listed the currently equipped addons with schematic style lines connecting to the ports. Since I needed to hide the ship list to make space, I also needed a new way to list the addons so that one does not have to mouse over the ports to survey this information. Personally, I find the schematic look adds a certain appeal.

As before, drag and drop to equipping items, but now you can do so from either of the cargo windows, and I propose also directly from the buy screen with a confirmation of the purchase. (These windows are not shown here, see 4.3.2.)

Pressing the Change Ship button returns to the default left panel, with the ship list.

The Unequip All button has been migrated here.

Finally, pressing the Weapons Groups button “slides” a panel out (conceptually) which is explained next.
EDIT: Ignore the word "slide", it just opens the panel.

4.3.2 Weapon Groups

The middle column shown here is not normally visible; it only opens after pressing the Weapons Groups button in 4.3.1. Normally either the buy tab or the view cargo tab will be visible instead.

This panel can work exactly as it does currently. Another suggestion for an intuitive method to define the primary/secondary/tertiary groups is to hover the mouse over the port and press the trigger key. Hence left click for primary and right click for secondary.

The Close button restores the center column to the items lists.

The merits of this configure area are to be able to easily and independently change and configure your ship without taking your focus off the items, or browse different equipment sources without abandoning the ship selection or configuration screen. The menu hierarchy is up to two levels flatter than the old UI, depending on the case, making it more intuitive and easier to navigate:

Eg.
OLD: Ship > Manage > Configure Ship > Addons
NEW: Ship > Configure

OLD: Ship > Manage > Select Ship
NEW: Ship

OLD: Ship > Buy > Other
NEW: Ship > Buy > Other

5.0 Commerce Console


Figure 5.0 - The proposed replacement for everything under the Commerce menu.

The main feature of this console is to provide a consistent, obvious way to move and keep track of items between all three item tiers of the game: station sales, ship cargo, station cargo. It merges the splintered functionality of the Commodities>Buy, Commodities>Sell, and Load/Unload screens

It also keeps the menu hierarchy flat and simple.

5.1 Item Description Panel

The item description panel remains in a consistent position with the ship console, but its height is cut in half for the benefit of other windows. This is rationalized since commodity items have short descriptions and never exceed this size, although selling ship items here would give you less of a view. However, seeing tactical data is more important while in the activities of equipping your ship, and less important in this console, where the primary focus deals with buying/selling commodities. Ship items can still be sold from the ship console, where the tactical importance is brought to the forefront, while here, it is the concept of profit/loss that is highlighted.

Displaying the credits is essential (in at least one place), but displaying the licenses was only done for consistency with the Ship console.

5.2 Item Lists

At the top of the ship cargo window, the currently selected ship is displayed with a drop down. The ability to change your ship without leaving the screen would make this console great. Although now the menus are flat and it would arguably be just as easy to move to the ship screen to select your ship, your brain doesn’t think like that. It doesn’t want to think about going to the ship screen, you want to do commerce, and changing your ship was an afterthought of commerce, so all your brain wants to think about is “let me do everything I need to do to perform effective commerce here.” The choice of drop down list is a bit dubious, less convenient or descriptive as the full ship list with displayed addons, but it saves space.

There are some alternatives we could consider with these lists:

1) The lists could be adapted to single lines, just like in the Ship console. This would double the scant listed items in each window. This is probably the better choice, I only didn’t illustrate it here for counterpoint.
2) Again, instead of three sets of buttons, one set could be set aside and multi-purposed to save space and display more items, at the cost of usability. Probably not a great choice.
3) The Station Sales window has enough width to add vertical tabs for accessing addons, however this is probably not necessary since usually it makes more sense to buy addons in the ship console; this would probably be no more beneficial than confusing.

The “Sell All” button for station cargo doesn’t exist in the game. Could be dangerous, requiring a confirmation box.

6.0A Warm Welcome


Figure 6.0 – Welcome screen mock-up to accompany the rest of the consoles.

I designed a few suggestions into the interface, but this screen is a lot more relaxed design-wise, so I’d be open to radically different ideas.

I did however, take a stab at trying to clear away most of the screen so we could have something nice to look at as part of the routine of visiting a station (emphasis: part of the routine, not a key to remove the console so I can stare at the station without doing anything). I’ve heard others voice that it would add a lot of visual appeal and break up the monotony of docking at a station, and I agree.
EDIT: The space shuttle wallpaper is a gag, what I imagined is to have a view of the current station we are docked at, like we do currently in the game, only without the menus in the way.

6.1 Repair and Refill Ammo

The only unexplained element is the panel at the right hand side.

I know Incarnate said he wants to be careful about keeping things convenient for veteran players, but the only convenience items I thought were still worthwhile to leave on this screen were the repair and refill buttons. With the new UI, everything’s already pretty convenient, but for me these served more as a reminder than a convenience, and I wanted to keep that reminder. Along that train of thought, I put concept Auto Repair and Auto Refill check boxes. (And I know I’ve heard about those before). Possibly, they could be hidden away in the game options. Finally, it might be reassuring to confirm which ship you’re launching with before you click on the Launch button. I clustered all these close to the Launch button so it would be easier to get a quick eyeful.

The button Corvus V Hold opens a window with the background story of the station and Wanted Items displays the list of items the station is running low on. I figured these were accessed seldom enough that having one click to access these in a clean window without scrolling was worth it rather than blocking the view. A side idea is that Corvus V Hold could be in red if the user has never once read the background.

“Set home” and “The Bar” operate normally. Options button and the rest of the quick reference information once again didn’t make the cut. It’s true, we could find the space on this screen, but these things have their proper easily accessible screens, and they are not related to the Welcome screen, so I prefer cleanliness and consolidation.
Oct 27, 2008 evoros link
... miss type, posted incomplete by accident... more to follow...
Oct 27, 2008 evoros link
7.0 PDA

I have decided not to bother making mock-ups of my PDA revamping, since they will be simple enough to explain.

I left the PDA button absent from the station console bar in the previous mock-ups. I wanted to emphasize that the PDA is really a stand-alone UI that doesn’t have to do with the station and can be accessed independently. But this is only effective if we had adequate keyboard binds to the PDA, and then only if menu hotkeys don’t interfere with these binds. (See section 8.2) If so, we would be eliminating another navigation level, making the hierarchy flatter and more intuitive. However, if you didn’t want to use the keyboard binds to access the PDA, (which you are forced to learn in space regardless), we could definitely add the PDA button to the console bar and access it the old fashioned way.

7.1 PDA, the nu style

For numerous reasons, I believe the menu hotkeys (eg. press ‘r’ for Character while in that menu context) should be removed from the game in favour of a few simple, well chosen custom keyboard bindings. In super short form, menu hotkeys are at odds with keyboard binds, but keyboard binds are better. (See section 8.2 for more)

Instead of menu hotkeys, we need to arrange PDA functions and provide keyboard bindings for all of the following primary, game industry recognizable, interfaces:
· Missions
· Navigation
· Comm
· Character
· Inventory

The PDA can retain its identity from station functions by using the familiar right-sided menu bar, populated with the above primary functions. (Sensor Log has been amalgamated.) As done in the previous mock-ups, key bindings will be printed on these buttons to assist memory and draw attention to their use.

7.2 Missions
· Mission Logs
· Mission Board
· Mission Notes

No real beefs here…

7.3 Navigation
· Map
· Nearby Ships
· Stations

Old Navigation tab is renamed to Map for distinction.

Nearby Ships and Stations tabs have been absorbed from the Sensor Log screen, which will be dissolved.

7.4 Comm
· News
· Buddies/Group
· Guild
· Ignore

No suggestions, I have not really used these too much yet.

7.5 Character
· Statistics
· Advancement Logs
· Faction Standings
· Accomplishments
· Killed List
· Killed-By-List
· Pvp

The character screen gets a few additions.

Advancement Logs for me has instinctively been a character related window and belongs here instead of under Missions. I use this window to see how my character has progressed, what experiences they have gained compared to what I have and how far I need to go etc. With the current UI, I continually make the mistake of going to the character screen instead of going to Missions.

The rest of the Sensor Log tabs are also here. I have no idea what PvP kills really have to do with sensors, but I can understand how they relate to my character and his career.

7.6 Inventory
· Ship Cargo
· Inventory Tracking

Cargo has been renamed to Ship Cargo since storage in the station is also called cargo.

Tabs and sub-tabs should always have distinctive names, so Inventory Tracking is just one stab. It could also be called Galactic Inventory, or something, but I like Inventory as the top level name since its purpose is iconic.

The binding for Jettison Cargo should be renamed to Inventory and would serve as the keybind for this whole interface.

8.0 Best Practices

Other thoughts on general practices that the VO UI could still implement.

8.1 Using The Mouse

The game has many opportunities where it doesn’t take advantage of the mouse. A double-click should trigger a default action for generally any selectable item in any scenario, be it buy, sell, load, unload, unequip etc. Forcing users to select an item then either mouse over to click the “Purchase” button, or learn the keyboard shortcut, is not user-friendly.

Drag and drop support should be extended to every pair of elements that list items.

Since item stacking exists in the game, a way to handle this with the mouse should also be implemented, commonly with a right-click or shift-click. This could prompt the user to enter a number of objects to split from the stack, or simply alternate between single/stack pick up.

Technically, implementing all these mouse functions could free up the clutter of many buttons in exchange for necessitating use of the mouse. Even without eliminating buttons, it still makes the UI more user-friendly since players can work with the mechanic they’re most comfortable with.

8.2 Why hotkeys suck

Keyboard shortcuts in general are great and all games should have them. They should be implemented via customizable keyboard bindings. Mnemonic, menu specific hotkeys however, (as commonly used in office applications, (F)ile (E)dit etc.) are not usually found inside games, because they are at odds with the variable nature of custom controls.

How are keyboard bindings better than hotkeys?
With custom binds, the player can choose which key is most comfortable for them to use.

Alternatives to hotkeys?
You don’t need to populate your entire game with hotkeys because they mostly won’t be used, it’s a lot of work to memorize all of them. Players only need a keyboard shortcut for their most commonly accessed features, which relates nicely to the highest levels of menus, so giving players a customizable binding for these achieves much the same results as a hotkey populated UI.

For default action hotkeys like “Purchase”, your mouse’s double click should be the substitute.

But, why can’t we all just get along?
You don’t want both keyboard binds and menu hotkeys at the same time because you will have key conflicts, or you will limit the key choice for players. You don’t want to switch between modes because this can be confusing when players have to remember the true meaning of their key in different situations, or are subject to misleading visual cues.

For example, in VO, I set my Character bind to ‘c’. Inside a space station, ‘c’ is overridden by the ever-present (C)ommerce, and ‘r’ becomes the character shortcut--but only if you first select (Y)our PDA. I pretty soon hated using any keys inside the station since it was breaking my habits, I never knew if my bindings would work or pull up other random windows.

So binds and hotkeys are at odds, so we need to stick to one or the other. It’s not feasible to eradicate custom binds since their benefits extend beyond navigating menus, therefore it’s much better to remove menu hotkeys and replace the most needed functionality with custom binds.

What’s the solution?
To reiterate, having hotkeys to quickly navigate multiple levels of menus is not a remedy, it is a symptom of a problem, that the UI is poorly engineered. It signals that the functions are hard to access because they require navigating through multiple levels of menus, meanwhile hotkeys create more problems by adding complexity and by conflicting with players’ custom controls. Thankfully, the utility of menu hotkeys can be moot with the combination of keyboard bindings and effectively designed UI. Menu specific hotkeys should be removed in favor of these.

8.3 Sounds

Generally, there should be a confirmation sound for every UI activity, but adding a unique sound for important UI activities, such as purchasing or selling, would be an even better level of confirmation.

9.0 Summary

What is the wood-be result of assembling the novel above?
· Easier to compare and analyze technical details of combat items
· Easier to equip ships and manage inventory since don’t need to jump around different screens to get the job done
· Less frustrating--use-case based screens mean the UI seems to be working with you rather than against you
· Less disorienting: flat menu hierarchy makes navigating easy. Consolidated, non-redundant features makes activities practiced and memorable.
· More user friendly by supporting more mouse controls
· And much, much more…
· Coming to a theatre near you
Oct 27, 2008 evoros link
Ok, so that pretty much sums up my life’s work for the past while. Feedback, peeps, devs?

If this stuff seems reasonable, what’s the best way to see it come alive? If there’s no resources left for devs to implement it, what are my own options? I heard I could probably re-work the entire UI via lua plug-in, but then a little bird also told me that the actual UI is (surprise) already done in lua. So if the task really fell to me, I wouldn’t want to reinvent the wheel. Devs, should I be joining the PCC, and then would I be working with existing code?

Thx,
-Dirty Cash
Oct 27, 2008 ratonu link
sorry i cannot help you with directions, but many appreciations for your effort and dedication. i really hope someone on the forums (why not the devs) will help you out to put this together.
I too am really lost in the vendetta UI, as not all of us are hard-core players that get used to it after (continously) playing for 10-12 hours.
Oct 27, 2008 Scuba Steve 9.0 link
That looks really cool, Evoros. I've been meaning(Note: I'm not a dev) to take a whack at rewriting the UI for a while now, but I'm a horrible UI designer. I'll make sure to read through this thoroughly this weekend and possibly begin implementation of the code(or help out).

Devs, should I be joining the PCC, and then would I be working with existing code?

Yes the code of the UI is available and yes you need to be in the PCC to access it. There's some coding style guidelines and stuff you have to follow on top of that, as well as the code needs to be reviewed and tested by an actual dev. #vo-lua is a great resource to rely on for this kind of thing.

As a final note, there is already functionality in place that lets you prototype different versions of the interface without having to go through plugins(Just some changes to the config.ini)

Ediy: I've owned an account for years and I still get lost in the current UI. Granted, it's much better than it used to be. Don't feel too bad about it, Ratonu.
Oct 27, 2008 incarnate link
This looks really interesting. I haven't had a chance to completely read it in depth, yet, but I will be doing so (and posting more once I have).

One off-hand comment.. we added drag-and-drop a little while ago, and while it is technically usable (in the ship config areas, you can drag addons onto and off of your ship) it is not yet "advertised". It was my intent to make wide use of this in the next interface redux, to try and simplify certain interfaces.

Generally speaking, we do an interface redux every few years.. "stuff" keeps getting added with new gameplay, and it eventually becomes way too insane, and then we try to re-work everything to make it more usable. The timing on this input and discussion are good, as I'm hoping to do another redux in the not-too-distant future.
Oct 28, 2008 MSKanaka link
To be honest evoros, your mockups look a lot more unintuitive at first glance than the current interface... and that is seriously saying something.

Like Scuba, I've had an account here for years and sometimes forget where I am in the current UI, but compared to how it used to be, it's like a regular old TV remote to the old UI's Super Mega Digital Satellite Television DVR Home Stereo All-In-One remote.

Yours looks far too crowded; there's too much information on a single screen at once. Another problem is that there's a lot more back-and-forth mouse movement with your interface -- the current interface is designed for a sweeping motion, clockwise around the edge of the screen.

Definitely some good work coming up with the mockups (and serious karma points for doing it in MS Paint), but I would personally never want to use that particular interface as-is. Not to discourage you, though. You should definitely sign up for the PCC and learn Lua and IUP; if you can come up with a working prototype for what you've got there, there are plenty of us in the PCC who would be willing to help test it and give feedback.
Oct 28, 2008 Scottso link
Wow as a new player I have to politely disagree with MSKanaka. These new mock-ups are way more intuitive for me and it has all the information I want see that matters in a prominent place without having to click and scroll a ton of different windows. Anything above that, like drag and drop, is just gravy.

I spend way too much time in the ship and commerce menus clicking between different tabs trying to figure out what I have, what I need to buy, what is equipped now versus what I have available to equip, and what is available better than what I have now and what I should just sell in the station I happen to be in. Especially when you have multiple ships in multiple stations where the old ships were from multiple license levels prior.
Oct 28, 2008 Scuba Steve 9.0 link
Don't take my message of support of twist it into your evil, unsupporting message, Miharu!

Back on topic though, I think it's a lot easier to digest the information on these mockups and then act on it instead of the current station setup.
Oct 28, 2008 smittens link
Amazing post, concept, everything. You did a fantastic job. I also have to strongly disagree with Miharu, this is much simpler! Miharu, I think you're forgetting what it's like as a nub, when they don't know where things are in the menus, and have to go menu-hopping through everything to find what they want. This presents all the info for the eager new pilot, and lays out the options very effectively. Hell, even after playing this game for so long, whenever I come back from even a week's break I'll get lost in all the tabs at least once.

Also, Steve and Miharu...do you even remember the old interface?? I have to say I liked that one a lot better, and I know I'm not alone. It, like this, gave a lot more one/two click methods of handling everything.

I think the key word here is MINDLESSNESS, the core of any great UI! The old interface, and this one from what I've seen, could be navigated without a conscious thought. The current one takes a plan of action, which is never good.

I'm not really sure where the need for a "sweeping, clockwise motion" comes into play but I'd much rather have an interface that lets me AND my new n00b recruit buddy do what we need on one page rather than circle through a bunch of tabs. This interface feels much less crowded than the current one, especially looking at the new Ship/Item details box. Perhaps by not fighting much you miss out on how important stuff like that is!

I wrote down some notes as I read your first post, evoros, and got a paragraph into the second bit before I realized I desperately need to get to bed. But rest assured, this is an excellent design, a wonderful improvement, and I will be eagerly looking for you ingame to compliment your work in person!

Final note (before the final notes) to Incarnate: Please. Soon!

Here's what I got down:

Simple, lays it all out, no need for menu-hopping

4.1

Sell price should appear in line with the items for comparison. Even if this makes it crowded, it's a standard, key thing!

Dont' know about the need for drag-and-drop cargo into/from station. Since load and unload are right there

4.2

Love that buying and configuring are shown at the same time, makes it infinitely simpler!

Maybe put the ship view above (vertically) the ship-list/configure? Makes sense (to me at least) that this is more important and thus should be higher. Also a ship model is more visually impressive than text, and so should be displayed higher

Love that the ship/weapon details is a taller box. It was impossible to easily compare add ons, frequently I just opened up the VO wiki rather than bother with the short ingame box.

4.3.1

I also really like the labeled weapons on the equip screen. Great idea!

Now drag and drop makes more sense. Although it might be a bit counter intuitive, since the rest of the interface (even if your original d&d mention in 4.1 were kept) is all button oriented. As a nub I think I would spend too much time looking for an unequip /equip button before figuring out that it's d&d

Sliding (for the weapon groups panel's appearance) also doesn't really fit with the rest of it, just having this pop up wouldn't be too bad.

4.3.2

I like the idea of mouse hovering/clicking to define ports

4.3 in general: I just really think equping/unequiping add ons should be done with buttons :)

5.0

The only thing that sticks out is that people with lots of experience playing other MMOs might expect, when they sell something, for it to appear in the Station Sales. This might've been an expectation with the old interface too, but somehow having everything all laid out in one screen I think it would be a bigger "Where did that go?" for new people.

Also you need a better title than "Station Sales" :P

5.2 1) I like the double-line descriptions of items in the Station Sales panel, but for ship cargo (and especially Station cargo, where you probably have more stuff) single lines would be nice. Presumably, you already know the second-line description since you had to buy it once. Also this would reinforce that Station Sales is an "overarching," "superior" panel

Instead of a drop down list for choosing your ship, maybe make it like the current PDA inventory screen, listing all the ships and you can double click them to collapse/expand their inventory? More consistent, and gives faster access to selling from a variety of ships. Maybe make your active ship's inventory start open

6.0

If we could get something that looks very pretty, then I like the idea of just a relaxing picture for the main view. If not, then maybe something like News could go in the middle? In any case I think the bar at the right seems a bit crowded width-wise, how about making it go out as far as the left side of the Help button?

7.0

How about a PDA button that opens the PDA "on top" of the rest of the interface? It could be along the bottom, centered, and remain highlighted while the PDA is open to make it clear that it's an on/off switch. I really don't think relying on in-flight hotkeys is the way to go for showing this
Oct 28, 2008 MSKanaka link
Actually, no, I'm not forgetting what it is like as a "nub". It took me no more than fifteen minutes to figure out how to use the current UI when it was first released. (You also forget that a couple of the tutorials explain the interface, and that the first character created on an account is *required* to be walked through the purchase and outfitting of a new ship.)

These mockups suffer heavily from information overload. There's simply too much going on on these mockups. The current interface may not show "enough" on any given tab, but there's a problem when one goes too far in the other direction. Putting lots of information in one place is not the same as being simple. They are not mutually exclusive concepts, but they are not the same thing.

I played with the old UI for over three years; of course I remember how it worked. And yes, I did like it, despite its overwhelming clunkiness and inflexibility. Sure, a number of things could be done in one or two clicks then that require one or two more clicks now, but one has to take into account a number of other factors as well: changing or adding to that interface was a huge pain in the ass compared to changing the current one. The current one is modular and easier to modify; the other one required a large amount of work to make even some of the simplest changes. The old interface also was not conducive to showing a lot of information at a given time -- remember having to purchase a ship? You had to flip through every single ship variant available at that station just to get to the one you wanted. So the ship you want is at the ass-end of the list? Well guess what! You can't start at the beginning and hit the "left" button in the list to go to the back of the list; you have to go through all of the ships to get there. The current UI shows all of the ships available to you at a given station without requiring you to click through a list until your fingers fall off.

As for the "sweeping, clockwise motion"... I would rather accomplish a task requiring mouse input using one fluid motion rather than a constant back-and-forth between two spots on the screen (the weapon group tab suffers heavily from this, and I agree that it needs serious refinement), which becomes rather tiresome for my wrist and arm after a while. That said, I'd much rather be able to have the computer do what I want it to do by reading my mind, but that isn't happening anytime soon.

I'm not disagreeing that the UI needs some more refinement -- because it most certainly does -- I am disagreeing about whether this particular example is "better" than what we currently have. I think it isn't, but I don't think the interface we have now is optimal either. I've taken a few courses on interface design, and one of the key concepts being reinforced over and over is that there is a delicate balance in designing an interface. Too many things going on, and you can confuse the user. Too few, and there's no point in having the given interface component.

So, I reiterate my final point from my original post: join the PCC and get access to the interface code, then come join us in #vo-lua.
Oct 28, 2008 evoros link
Fist of all, thanks for all your input guys, keep it coming! Any opinion tells me that people do really care about what happens with the UI, but obviously I'm ecstatic that most of it is positive. It's a good payout when at times I wasn't sure if I should bother continuing my little project...

Incarnate:

Hah, it's funny you mention drag and drop wasn't advertised, since it's the first thing I naturally thought to do. (Perhaps other RPG conditioning: put gloves onto the hands box...) I'm a bit embarrassed to say I didn't realize “the original” way to do it until you actually posted this. This is just one person's experience, but to me it's a strong advocate that it would be feasible to get rid of most of the buttons when there are obvious mouse controls.

MSKanaka:

Thanks for your comments. You highlight a core concern for the proposed UI, which is crowding. Like I was saying to Incarnate, one way I would consider making the screen less hectic is removing buttons from the screen when there are obvious controls, such as by using the mouse. We still aren’t making full use of double-click, drag and drop, or even a tempered inclusion of right-click or shift-click. I understand the risks of alienating a user without providing official, black-and-white buttons, but I think this might be an overly conservative view, if you consider the benefits a player would enjoy forever after the initial “eureka!” of understanding the interface. Truly, that moment would be seldom felt if we did this only for obvious controls.

Smittens:

Thanks for your thorough treatment. Your points are all valid, and if I don’t comment on something it’s probably because I’ll agree at least with the counterpoint and leave it at that.

About “sliding” in 4.3.1. Yeah, I probably shouldn’t have written that. I don’t mean that the panel in any way visually slides, functionally it opens just like any other tab. Only, since it doesn’t look like a tab and with the open/close button controls I laid out, “sliding” seemed like a tangible concept in my mind.

4.1 Sell price should appear in line with the items for comparison. Even if this makes it crowded, it's a standard, key thing!

Ship > Sell doesn’t put sale prices into a column either, which I tried to give some loyalty to.
When a player is selling items in Commerce, VO normally displays three things in the price column: the current sale value, the purchase price, and the quantity. In contrast to the buy interface, many items would have physically not enough space, without either eliminating some information, resizing the windows, resizing the text, or putting some weird scrolling column in. Out of these options, I would display only the sale value, but if it were up to me, I wouldn’t display that either. :)

To wade a little bit deeper into this, I too first wished I could have it all on this screen. If we did, however, we actually wouldn’t need the commerce screen at all! I decided this actually wasn’t a good thing, it would be as MSKanaka alluded to, information overload, and you would have one mega-screen that did it all, but none of it well. So, I decided to compromise (or specialize) and leave this as a tactical screen where sale revenues could be swept away (only from the limelight) to use the space more effectively, whereas if you were concerned with tallying up sale values you could go to the commerce screen.

4.2 Maybe put the ship view above (vertically) the ship-list/configure?

I did this only for minor reasons: because the ships list is conceptually similar to a tab, that it selects something to change the content below it, and because configuring the ship will put the ship name appropriately on top so, there was some consistency there.

6.0 If we could get something that looks very pretty, then I like the idea of just a relaxing picture for the main view.

Lol, my picture was more of a joke. I imagined the current camera view of the station would work.

NEW:

I noticed I forgot to include the ship presets functionality anywhere. I think they could find a place inside the weapons groups panel (4.3.2). If space is needed, the text instruction on how to configure the weapons groups could be moved to the Help dialog. This panel would now become a sort of centre for advanced ship config options. The button to open the panel could even be called “Advanced”, as a familiar windows concept. The buttons to purchase the presets could be put at the bottom inside of the Ship > Buy > Ship tab (4.2.1).
Oct 28, 2008 smittens link
I guess I was a bit nit-picky on sliding, that term really did get across what you wanted.

Regarding 4.1/Sell prices, I wrote everything as I read it, so I didn't see the more robust Commerce tab, which really takes care of that issue. Like you said, now the ship menu can focus on equipping/buying stuff and leave the real merchant, price-comparing aspect to the Commerce tab where it really does belong!

Regarding 4.2/Ship model location: If the model only showed your active/selected ship, then it would make sense to put this below, but since it would also show a ship you're planning on purchasing (based on info from a whole different panel) I'll stand by my original suggestion, that it should be on top :) Mainly because, by linking it to two different tasks, it takes precedence over each. Does that make sense?

6.0 I wasn't really expecting the canada station image :P But also I don't think the view now of just the rotating station is visually appealing enough to provide that relaxing, open atmosphere you're after.

To Miharu:

I've made plenty of new characters, and I always get bogged down with the tutorial. I think the tutorial does a great job at showing how overly complex the UI is to all our new players, since they have to contend with all the "Next >>" clicks along with going through all the different tabs.

And if you look at Evoros' pictures, there is still a lot of free space that prevents it from being too cluttered. It's not one block of text, it's not even three solid columns. Perhaps if this were showing, say, Hortan's station, which I can imagine would be a lot fuller, it would be more cluttered, but I think space is saved in the columns and empty lines, enough to balance the scales of overcrowding and not enough info.

That's funny, I'm in a UI class too. But it focuses on mobile phone interfaces, so I guess my view may be somewhat subjective, since I've been working with a much smaller resolution; perhaps I no longer have a good sense of what over crowding is on a computer screen.

One principle we did step out of the phone-design world for is optimizing button etc locations. Pretty much all research on the subject points to the (rather simple) conclusion that time spent on finding/reaching buttons is based simply on the distance to a target. The current UI's circle-sweep-path uses a large circle as the basis, which adds a lot more distance as you go around the screen. Evoros' interface does require more back and forth movement, but for the most part, this is all kept within a relatively small, task-centered area, so really this interface is "faster"

(Of course that's just looking at it from one easy perspective, there are definitely numerous ways where the current UI takes the cake on speed!)
Oct 28, 2008 evoros link
Regarding MSKanaka’s second post:

“It took me no more than fifteen minutes to figure out how to use the current UI when it was first released.

I don’t disagree that it is simple to understand how to use the current UI, if you are thinking about it, I can trace the menu hierarchy and it makes sense how to use it. My real point is that I still have to do this, and although I understand it, it doesn’t make the UI easy.

About the back-and-forth motion, do you mean to say that operating controls in a geographical configuration of top, right side, then somewhere in the middle is a better alternative than not operating them at all? I’m not sure how the proposed UI has more bouncing or back-and-forth than the current one, can you give me an example?

“Putting lots of information in one place is not the same as being simple. ……there is a delicate balance in designing an interface. Too many things going on, and you can confuse the user. Too few, and there's no point in having the given interface component.”

You hit the nail on the head, and you’re absolutely right about the balancing act you described. My view is that the current UI is very simple, functionally at each screen at the deepest travel of the menu. I think this is out of balance because in preserving this level of simplicity, the menu system has become a maze to most people.

“The current one is modular and easier to modify;”

Great point, I don’t really have an answer to this, since VO is really continually in development. Unfortunately for players, the current modular design doesn’t actually make the UI good to use, currently. It only makes the Devs’ work easier in the long run.

“The current UI shows all of the ships available to you at a given station without requiring you to click through a list until your fingers fall off.”

Good news, so does the proposed one.

P.S. For the record, I didn’t mean to offend any previous VO interface designers with my suggestions, or say, with the title. I definitely know it’s not an easy task to design a great UI, which is why I’m simply trying to make suggestions to improve the design.
Oct 28, 2008 Daare link
There's no doubt that the current UI could use a thorough revamp but, I would argue, not a total redesign. In fact, I rather like the current UI's basic design paradigm with all the navigation controls in the upper-right corner of the screen (which is a default area for presenting information) - it keeps mouse movement to a minimum and makes scaling the UI easier and more predictable. Yes, some things are buried and need to be unburied and perhaps a few things could be consolidated or moved around but, please, do these things within the framework of the existing UI. That being said, there are a few minor changes I'd like to see: - keyboard commands made consistent throughout the UI . - a click in or tabbing into a user-input text box starts out by selecting all. EDIT: Someone's CSS is screwing up my formatting.
Oct 29, 2008 blacknet link
Interesting post, I have not had a chance to read all of it but I will.

For the time being I have to say there seems to be a common trend of 2 types of layouts. Group A tends to think the current layout is bad while Group B things the current layout is good and the proposed changes that A group wants to do would find confusing. So instead of trading things out I am under the impression we should work towards a dynamic layout and let the USER pick what they want on the screen and where. This is no easy task but quite doable.

One of the best solutions I have seen to date is a drop down list box with all the menu items on it. player clicks on the desired item and the frame below that (most of the screen) is filled with that info. Then maybe have some hot key buttons/links/shortcut keys for commonly used items somewhere, all they would need to do is push the button. Also have a user settable start frame when docking, i.e. combat related, mining related, trading related.
Oct 29, 2008 evoros link
A dynamic interface would be more flexible. If we were going to go the dynamic route, I think we should just have drag-able and resizable windows toggled by keybinds or a menu bar, just like any other MMO. I… could start typing pages but I’m just going to leave it at that.
Oct 29, 2008 blacknet link
1.0

have been plenty of topics on that and when the pcc went into the forums to get out useful info we really had to dig to get good stuff.

2.0

we now have a pcc lua wing that does IF work and a vast many things have been included in production to date with many things still in the pipeline.

4.1 ship console

I find this very confusing and disorganized and I do understand what you have in the layout.

4.1.1 console bar

The reason for those bar locations is for future expansions which have yet to be produced.

4.2 buy view

I hate to say it but this is not intuitive

5.2 Item lists
as for a 'sell all' I like this method better. it's easier to look at and navigate.


i more view the current inventory tab as a 'global inventory'

6.0 welcome

I am currently looking at adding an additional tab somewhere and let the user pick what groups they want in there. Or at least a custom welcome screen where the user can pick which items to show, i.e. mining/trading/combat/etc..

6.1 repair/refill

One option that I want to see is an auto repair/refill feature of some form. if it's turned on then the buttons are meaningless and can be removed for them.

7.0 pda
7.5 characters. reason the adv logs is in the mission group is you will be accessing the missions tab more frequently than the character tab.

--

as for the dynamic stuff it's quite easy to do a popup dynamic resize window. say you click on ship and a window pops up, you can configure ports, firing patterns, buy ships, set the color, etc.. then close the window for something else.

With the commodities it would be the same but you would be able to sell ships, after all it is a commodity.

Also worth noting you should join the pcc and help us with this! We need all the help we can get.
Oct 29, 2008 blacknet link


Click on the list item on the right side and the left box will get filled with the correct info.