Check out the Latest Articles:
Warning: Bad Frames Leads to Bad Eyesight

I’ve seen my share of UIs over the years. Some of them I’ve admired and others I’ve frowned upon. Perhaps one of the most aggravating factors in poor UIs I’ve seen is the unfortunate placement of important elements.

It’s to do with your eyes. You’re born with only a pair of them. Take good care of them and try not to ruin it.

How can I hurt my eyes?

Simple. By making them work harder than they have to. >

Take a look at the screenshot above. This was my UI two years ago. My player frame was on the top left. My party frame was right below it. My raid frame was wedged against the left side. Buffs were on the far right. Three chat windows were arrayed along the bottom.

had so much real estate onscreen that I felt spoiled enough to try to make use of all of it by spreading everything out.

That was my mistake.

My eyes frequently bounced from the top left, to the top right, back to the middle, then back to the anchored frames on the side. Sometimes it would go in the opposite order. There was no flow to this. It didn’t make any sense. The “hot spots” of your UI are areas that should be easily viewable when transitioning from one visual element to the next.

Because of my UI mistakes, I now have to sit in the front row of class with glasses on to properly read overheads and PowerPoint lecture slides (because idiot professors like to use 12 point fonts instead of 32). Don’t make your eyes work harder than they have to.

Take care of your eyes.

In a future post, I’ll shed some light in how my visual UI evolved to the way it is now by applying some design principles with the goal of minimizing eyestrain.

Related Articles:



  1. Sylthi on Thursday, May 14, 2009

    I found this blog through WoWInsider, and am going to bookmark it for future reference. I used to have a UI very similar to this (and unfortunately some elements still remain like the placement of party and raid frames). The good news is my UI is still very much a work in progress and I am constantly experimenting with new layouts and addons to make my life simpler. I am looking forward to your follow up for tips and suggestions.

    In the meantime I think I’ll take a look at your HUD suggestions. I gave up mine recently and miss it terribly.

  2. Tebla on Thursday, May 14, 2009

    Can you post a screenshot of the UI you use now?

    Here is mine just in case you want to see it. I have added Pitbull for player., target and party frames.

  3. Tebla on Thursday, May 14, 2009
  4. Matticus on Thursday, May 14, 2009

    @Tebla: Yup, that’s coming soon. Actually you can expect a post from each staff member in regards to their own UIs. What kind of a UI blog would we be if we didn’t share _our_ UIs? ^^

  5. Wikwocket on Thursday, May 14, 2009

    I think this is why Grid is popular: keeping everything you need to look at close together. But I believe this ideal should extend beyond which unitframe you use and how you configure it, and into your whole UI.

    For my healer UI, I have Grid on one side of my screen, next to an enlarged player frame, and next to a small action bar which contains all my long-cooldown abilities and items. My DBM bars are above this cluster and my PowerAuras are below it. This means I can focus on one area of the screen. In fact if I blacked out the rest of my UI I’d still be fine. Less eye movement, less mouse movement, quicker response times, better efficiency.

    It was my own cases of eyestrain and wrist strain that brought upon this epiphany, but I encourage others to learn the lesson before causing repetitive stress injuries!

    Wikwocket’s last blog post..Talent Review: Serendipity

  6. Kiryn on Thursday, May 14, 2009

    So true, and it’s why I can’t ever play with the default UI any more. Who thought of putting my buttons and my player/target frames, the two areas I need to look at the most often, on opposite sides of the screen? It wasn’t so bad when I used a 12″ powerbook to play, but now that I’ve got a PC with a 26″ monitor, it became difficult to move my eyes back and forth all the time in order to see all the information.

    I moved my player/target/ToT/party frames down to the bottom so they’re near my buttons, and tend to keep non-crucial information like my quest and achievement progress in the place my frames used to be. My eyes are much happier now.

  7. Jeroen Janssen on Thursday, May 14, 2009

    On a side note, what do you listen to while healing a raid? I noticed a couple (long term playing) guildies just tent to listen to music, while I just listen to the ingame sound and music.

    Nothing beats hearing the tapping sound of a warlock to understand why their health is dropping so fast.

  8. Dahkeus on Thursday, May 14, 2009

    Hehe

    “WOW MADE ME GO BLIND!! AHHH!!!”

  9. Akuman on Thursday, May 14, 2009

    @Tebla: What UI are you using?? I’ve been trying to find something similar to yours but with no luck!!!

  10. Naroc on Thursday, May 14, 2009

    @akuman: UI = user interface. i guess youre rather asking which addons he uses. to me it looks like a mix bartender, sunnart and some other random addons you might find useful

  11. Tebla on Thursday, May 14, 2009

    @Akuman I recently submitted my UI to the Wowinsider reader UI of the week. I haven’t heard back from them, or even seen another post from them. I have spent a lot of time on this UI and I love it. Below is an updated list of the addons I use and brief descriptions. Naroc is correct; the main ones changing the UI are SunnArt and Bartender.
    UI L&F

    Ackis Recipe List – gives me another way to see what recipes I can still get for my different professions.
    AuctionMaster – Smaller than Auctioneer and has everything I need to be able to scan and sell stuff.
    AtlasLoot – Game loot lookup.
    Bartender4 – action bars.
    Bison – Allows me to change the placement and arrangement of my buffs and debuffs.
    Butsu – Cooler loot frame, with no pages.
    ButtonFacade – skins buttons.
    Cartographer – World map replacement.
    Chatter – Chat Mod.
    Chinchilla – Very nice minimap mod.
    Doom_CooldownPulse – Pops up an icon in the middle of my screen when a CD is up.
    FlightHud – shows pitch while swimming or flying.
    Gatherer – for mining on my alt.
    GnakedGnome – for checking your gearz.
    GroupCalendar – Replacement calendar that syncs with my guild raid announcements.
    Historian – Strictly for keeping track, on tooltips, how many of a certain mob I have killed before the, say Dark Whelpling, drops.
    LootDB – Places where something came from in the item tip.
    LiveDamage (Not shown) – gives me a real time text readout of my sp, so I can see how it is affected by procs.
    Quartz – Moves my casting bars around.
    QuestGuru – I like the quest tracker and extra sounds this one has.
    QuestHelper – Puts icons on my map, so I know where to find things for quests. Another side note: I was 70 before I started using this. It would have made leveling much easier, but I could see how it might be considered cheating
    Outfitter – Automatically switches between outfits, like when I enter a battleground.
    Overachiever, Talented and TradeskillHD – Augments the ingame pages for these.
    Pitbull unitframes (Not shown)– I use Pitbull for player, target and party frames.
    SLData Text – Allows for the information that I want to be displayed (fps, latency, gold, and more) anywhere I want. Not on my minimap. As a side note. The minimap is what started this whole journey really. As I added mods my minimap got cluttered, which led to FuBar, Chinchilla, etc.
    SCT – Scrolling combat text. Allows me to move and configure what and how combat information is displayed.
    SunnArt – Allows to modify the rendered 3D area of the screen without losing any visibility.
    TipTac – Allows for custom tip placement and looks cool.
    The Collector – toggles a window that shows me what mounts, pets and titles I can still get. Very cool for collectors.
    VendorBait – Surrounds the most expensive loot reward.

    And of course:
    Fubar
    AltasLootFu
    FuBar_Auto_LootFu
    FuBar_BagFu
    FuBar_DurabilityFu
    FuBar_FishingBuddyFu (with FishingBuddy)
    FuBar_FishingFu
    FuBar_MicroMenuFu
    FuBar_PortalFu
    FuBar_ReagentFu
    FuBar_RecountFu
    FuBar_uFriends
    FuBar_uGuild

    Raid UI

    DBM – Deadly Boss Mods is a must for the raids. For FuBar users, don’t use FubBar plugin for DBM. It pooches the options for dbm. I wasn’t able to get rid of the minimap icon until I uninstalled that plugin.
    DrDamage – For theorycrafting, displays damage information on tooltips and buttons. I haven’t decided if I need it.
    Grid – Replacement for the raid and party frames. It is configurable (once you muddle through all of the options) and allows me to click on any raid member. It is all I need.
    Omen – threat meter.
    Recount – To check my DPS. And go ahead and announce it to the raid, if it is high enough . It usually is, now.

  12. Xeonio on Thursday, May 14, 2009

    It’s important to note that extended hours of computer usage tend to be bad on the eyesight. People are less prone to blink their eyes when looking at a computer monitor (I don’t know why) but less blinking leads to dry(er) eyes. Chronic dry eye can damage your eyesight.

    It’s funny because I remember my eye doctor asking me if I had dry eye… and I was like I don’t know. How can you know if you have something if you don’t know what the symptoms are? It’s the feeling that you have something in your eye(s) even when you don’t. Dry eye can also lead to conjunctivitis (read: pink eye) as well which is pretty gross.

    Xeonio’s last blog post..Scheduling Headaches

  13. elfennau on Thursday, May 14, 2009

    @Xeonio That’s interesting. I never realized. I actually tend to blink more while at the computer instead of less. Its reading books and especially watching TV that tends to leave me blinking less. No wonder I’m more comfortable in front of the computer. :D


CommentLuv Enabled