Posts Tagged: ui

Pre-visualization for engineers

For engineers building user interfaces, I find there’s heavy emphasis on technical chops and little to none on design comprehension. Yet a subset of design skills can distinguish great from merely good UI engineers.

I’d term these skills “pre-visualization”: understanding design specifications before writing any code, and at a level beyond what designers formally deliver. A big part of pre-visualization is the ability to break down specs into reusable components. You discern visual patterns from existing parts of your app, site, or larger OS, and apply them to a designer’s work. In many, if not most cases, much of the spec maps cleanly to what came before. Common UI patterns like buttons, form elements, and navigation generally repeat themselves. Some will not.

Continue reading…

Battlefield 1 needs UI help

Battlefield 1 has received praise for its gritty WWI gameplay, but its pre and post-game user interface need serious work. They are too cluttered and confusing for casual players.

Let’s focus on BF1’s main menu:

Arriving after BF1’s otherwise stellar prologue, the menu is a momentum killer. There are six areas of functionality fighting for attention on this screen. Players can browse game modes and other recommended content in three interactive rows. Each has a different layout and visual aesthetic. There’s also information on profile, party, rank, and a legend to clarify button actions in the screen corners.

Continue reading…

Good UI engineering requires more than tech skills

To become a better web UI engineer, study design, communication, and vocabulary. Even if you cut back on some extra technical training, it’s worth it. That’s because the difference between good and great UI work rarely comes from technical prowess alone. It’s distinguished by creativity, visual insight, and sound organization.

Yes, JavaScript and styling fundamentals are important. You need to understand the tech behind your craft. But the solution to a tech blocker can be a tool or coworker away. And once you learn the basics of one MVC JS framework or CSS coding methodology, you can learn another.

Reusability is a bigger issue. Every time you change styling or write a new UI element, consider its impact elsewhere. Think ahead to where the application will grow and how you can cut repetition. It’s more than an blind grep through the code. It’s finding patterns. And visual patterns or usage trends are especially tricky to detect.

Continue reading…

Fallout 4: when a bad UI distracts from strong gameplay

Fallout 4 relies on a classic RPG feedback loop. Venture out and discover. Aquire loot and experience from combat and finishing quest lines. Improve your character, equip cool weapons and armor. Repeat. But thanks to an unwieldy user interface, part of Fallout 4’s feedback loop is broken. It’s increasingly problematic for me as I advance through the game’s main narrative.

Admittedly, that’s not a factor during most of my playtime thanks to Fallout 4’s superb open world design. There’s always something new to explore, little of which feels like filler content. The art direction and detail on most locations is impressive. Map layout is intuitive and influenced by real world constraints. Many terminals and safes add to a location’s backstory and the characters that populate it. It all adds to a breadth and unpredictability to Fallout 4 that I haven’t encountered in any other game this year.

Yet solid open world exploration and interesting loot only get you so far. Once you’re back at home base, Fallout 4 strains during character improvements and management. I’ve burned long stretches of time micromanaging inventory, encumbrance, and crafting items.

Continue reading…

7 rules for creating gorgeous UI (part 1)

I’ve bounced between web design and development for years. As someone who has never had a formal instruction in visual design, Erik Kennedy’s primer on this Medium post isn’t a bad start for those new. I especially like his thought processes behind rule three: double your white space. Might be a bit overkill compared to what’s absolutely necessary, but it’s one of the first mistakes I see from design newbies, especially developers starting to dabble in design work.

Improving the PS4’s UI

Live PS4 UI
My PS4’s UI as of yesterday

It’s clear the PS4 is an unqualified sales success. It’s sold around ten million units, roughly 2 to 1 against the Xbox One. Those are impressive enough sales to be a key factor in Sony’s profitability for Q1 2014 after years of losses.

But even hit consoles need work; almost a year into its lifecycle, the PS4 needs to improve its user interface. As I’ve argued previously, the UI gets the job done as a quick, no-frills game launcher. Yet its “horizontal ribbon” layout, with every app (in this post, ‘app’ is a loose interpretation encompassing both games and entertainment apps like Netflix) on the system ordered in strict reverse chronological order, is hampered by its lack of customization (note the upcoming major UI update, as of this writing, doesn’t alter the app layout at all.)

Customization matters

Core gamers, often with large game libraries, have the most immediate demand for a more organization-friendly UI. Yet it’s not just a traditional fan base that may juggle between many apps. Popular premium subscription services like PS Plus, Xbox Live Gold and the recently announced EA Access offer new “free” game downloads at regular intervals as long as you’re a member. And casual gamers that only buy a few $60 AAA titles may buy more games as inexpensive and free-to-play indie titles proliferate on the PSN store.

Also, in 2014, customization isn’t just a nice to have, it’s essential to the DNA of most modern tech gear. Every smartphone, tablet, or laptop allows you to organize apps into folders or across multiple home screens. If I’m paying the same price for a dedicated gaming console as I am for the next iPhone, I expect basic levels of customization to define it as my own.

There’s a philosophical argument as well: gaming is going through the same pattern as all media post-internet, splintering into fragmented, niche genres. With so many on the same base console but able to purse much more individualistic tastes, some basic UI customization helps distinguish my PS4 from somebody else’s.

A multi ribbon interface

With such a large install base, major UI changes can be tricky. Thankfully, the UI doesn’t need a redesign from the ground up, just evolutionary growth into a multi ribbon system. Users create as many additional ribbons as they want and move apps to any ribbon they choose. To keep things straightforward, like with iOS, there are no extra “shortcuts” or “aliases” of app icons, only a single canonical icon within a set of ribbons.

The original, single horizontal ribbon remains unchanged by default. Navigation and controls are identical to before, retaining the three row structure: settings, notifications and trophies are in the top row, apps in the middle, and details on an individual app or game at the bottom (figure A). Only one ribbon appears at a time.

Figure A: Start state of the proposed UI
Figure A: Start state of the proposed UI

Users tap the DualShock controller triggers (L2, R2) or speak voice commands to cycle through their ribbons. As each ribbon appears, the scrolling text region in the screen’s top left briefly displays the ribbon name (figure B).

Figure B: user jumps to a new ribbon
Figure B: user jumps to a new ribbon

Reordering games and editing ribbons

To reorder apps in a single ribbon or move an app to another ribbon, users enter a special “app reorder mode” by holding both DualShock bumpers (L1 and R1) down for a few seconds. This is a nod to the “hold an icon until it wiggles to edit” paradigm in most mobile OSes.

The UI’s look in this mode changes significantly: the top and bottom rows are removed and the app icon the cursor is selecting no longer enlarges the icon. In addition, new text labels are added around the ribbon to clarify the name of the active ribbon and its order (Figure C).

Figure C: app reorder mode
Figure C: app reorder mode

A new, simplified control scheme applies in this mode:

  • Controller bumpers cycle through the current ribbon’s order options: chronological (default), alphabetical, and manual.
  • X selects an individual app for movement.
  • Options opens up a menu to change the current ribbon’s name. Upon creation, all ribbons have an automatic, sequential ordering naming convention like “Games 4” and “Games 5”. But for users with a lot of content or who want a particular organization, custom labels are helpful.
  • The D-pad and analog sticks navigate between ribbons (up/down) and individual apps on a ribbon (left/right).
  • Square exits app reorder mode.

Once an icon is selected, a visual change (e.g. change in selected icon border color or thickness, icon appears to hover) indicates it’s available to move. Up and down always shuffles the app between ribbons. To keep things simple, the ribbons cycle with a definitive beginning and end; the first is at the top, the last is at the bottom and there’s no looping. This way, to create a new ribbon, all it takes is moving ‘down’ from the last occupied ribbon (figure D, E). Conversely, to remove a ribbon the user removes all icons from it.

Figure D: icon ABC is selected, ready for movement.
Figure D: Game 20 is selected, ready for movement.
Figure E: Moving Game 20 "down" once auto creates a new ribbon.

Small change, big impact

Adding smarter organization isn’t going to move the needle for PS4 sales. Nor is it likely to affect Sony’s ongoing battle against the Xbox One, a fight centered on game selection, exclusives, and raw performance. Instead, a stronger UI makes users happier while improving their attachment to the device. For a dedicated gaming console in an increasingly mobile-centric world, that’s an underrated, compelling factor in the long run.

How we made The Last of Us’s interface work so well

A guest Kotaku post by Naughty Dog’s Alexandria Neonakis on UI design within one of the most critically acclaimed games from 2013. I love seeing how the interface changed over time. It’s an especially cool look considering how rarely we get behind-the-scenes access to AAA game design.

Xbox One’s uphill convergence battle

Microsoft promotes the Xbox One as an all-in-one solution for your living room needs: gaming, film, cable TV, even home exercise. But the Xbox One leans on convergence to a fault. It’s a console whose overstuffed feature set, for now, has left it vulnerable on both price and its user interface. While core gamers kept sales strong over the holidays I’m concerned that the console will have a rough future with a mainstream audience.

Its convergence problems start with its $500 price tag. Devices that already carry the same feature set of core streaming services (e.g. Netflix, Hulu Plus) as the Xbox One are $100 or less. Granted, the Xbox One adds on high end gaming, voice and gesture UI integration along with limited cable TV control, but those additions for $400 are a hard sell for everyday consumers. And I doubt we’ll see a price drop anytime soon; the console requires high-end expensive gaming hardware to compete with Sony’s PS4 over next gen gaming. The Kinect, one of the Xbox’s purported main innovations, drives the price higher. Microsoft tacks on additional fees as well: a $60/year Xbox Live subscription is required for most functionality, a policy unheard of on competing tech devices like the PS4 or Roku.

Convergence across diverse activities also adds complexity to the Xbox One’s UI, an extra hurdle for mainstream adoption. Just compare the console’s preferred interaction method – voice – against interaction on competing media and tech devices. From my own testing, Xbox One voice commands largely work. But it still feels like a feature trying to find its footing; about 20% of the time I have to repeat myself or a command takes me in an unwanted direction.

80% reliability is a good start, but that’s 15% short of what it should be given the competition’s astounding performance. Consider the 1 to 1 touch interaction on a modern iOS or stock Android smartphone or tablet. Or the tried and true keyboard and mouse inputs on a desktop or laptop. Even buttons on a remote control for the cable box. These aforementioned devices “just work.” Granted, Microsoft’s voice technology is new and will improve, and there’s a game controller for backup navigation. But historically users outside a tech or gaming enthusiast base show little patience for new input technologies that work unreliably.

Then there’s added Xbox One functionality that’s puzzling. Things like:

  • “Snapping” an application like a web page or Skype alongside the right side of the screen seems like it would be used in a rare scenario.
  • Minority Report style Kinect gestures to move around the UI that are slow and awkward.
  • A Windows 8-like interface that’s visually striking, but occasionally confusing with a menu of very similarly sized and colored boxes doing different things.

Microsoft would argue that ambition takes time and that the Xbox One’s rough patches will be smoothed over soon. And I want the Xbox One to succeed; strong competition from Microsoft’s console leads to better technology from Sony, Nintendo, Apple and Google. However, other living room tech isn’t standing still. Rumors suggest the next Apple TV iteration will be ambitious. Sony’s PS4 runs select multi-platform games at higher resolutions with a more straightforward, gaming focused UI, which could appeal to the core gaming market. Drive can only take a console so far; with Microsoft’s missteps on price and UI, it’s unclear if the company can deliver on its promise.

iOS 7 thins out

There’s been a lot of debate on the iOS 7 visuals, especially among designers. I myself fall a bit in the middle – there’s some icons I can’t stand, but largely I’m trying my best to reserve judgement until I actually get a stable beta build on my phone. But designer Khoi Vinh correctly identifies one major problem I have with iOS: the typography. Helvetica Neue Ultra Light was never meant to be used this across the board, especially at such small sizes.

5 design tricks Facebook uses to affect your privacy decisions

TechCrunch posts a fairly troubling article on what’s become commonplace in Facebook land: UI slickness to make it more likely that you’ll allow apps to access your personal information.