Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I was hoping to get some advice from some more experienced UX developers. I have been presented with a unique challenge by my customer, and I feel like I am failing.

Specifically, they want a UI that looks modern and almost futuristic. Call of Duty, Minority Report have been specifically mentioned -

The challenge I face is to give them something close, but actually usable. The app is a program that people will use all day long. Nobody wants to really look at a game like interface all day. Also, I know as a front-end engineer, I don't want to load a bunch of static images, so I want to implement as much of this as I can in CSS. I need the resulting markup to be dynamic, so I can animate or scale it without distorting static images.

I really feel like I am out of my league. Also, they want the ability to switch the scheme from light to dark etc. So I dont; want to lock myself into something that just looks good in black...

So I guess in a nutshell, how do you make something futuristic yet actually usable? Help!

Here is what I have for a list of items- Looks kind of cheesy to me

http://jsbin.com/aleroq/41/edit

share|improve this question
    
Do you have access to visual/graphic designers? –  rk. Mar 31 '13 at 3:03
    
Btw, welcome to UX.se! –  rk. Mar 31 '13 at 3:03
    
@rk I do have a graphic designer, and we are trying to work on it together. The stuff he is coming up with is kind of cheesy. That I guess is a sub-question. How do to futuristic, but not cheesy. His stuff is kind of looking like a 1990s Strategy Game. Thanks for the welcome! –  thebringking Mar 31 '13 at 3:16
2  
These are ridiculous requirements. Design is about achieving business objectives. Has the client explained how these requirements meet business objectives? If not, I'd get some new clients. –  DA01 Mar 31 '13 at 7:04
1  
I think this question is more appropriate for graphicdesign.stackexchange.com. First you need a design that doesn't look cheesy. –  icc97 Apr 1 '13 at 7:40

3 Answers 3

up vote 1 down vote accepted

I can think of a few things that may give you direction:

Identify Audience

Your first problem is to identify the audience, and with it, the exact goal of the aesthetic design. Why does your client wants something futuristic? What is the client trying to accomplish? Who is the audience --who does he want to impress? Could it be potential users (i.e., to sell to them or to recruit them)? Superiors? Visiting dignitaries? The client him/herself? That will give you direction on both the aesthetic style to pursue and how to mesh it with usability. For example, it doesn’t matter if you think it’s cheesy. What matters is if the audience thinks it’s cheesy. If the users aren’t the audience, then you only have to avoid them reacting negatively to the aesthetic. Beyond that, they probably don’t care. You can research and test how the audience and users react.

As for usability, depending on who your audience is, there’s a good chance that it gets only a brief, superficial exposure to the app. After a short period, the audience has moved on to look at something else other than the app (e.g., the demo is over). Even if the audience is the users, its members may soon be so engrossed in reading and/or using the app, they’re no longer noticing the aesthetic anymore –they’ll be attending to the content, not its form.

If you only have to concern yourself with the first brief exposure to the audience, then you can achieve the aesthetic without compromising usability pretty easily, because the most extreme graphic design would need to appear only when the app first starts –maybe on the dashboard/home page, or perhaps just on the splash screen. Beyond that, the “futuristic” design is confined to mostly color, shape, and font choice that’s subtly reminds the viewer of the strongest images in the beginning. Things like subtle color choices (e.g., choosing dark green versus black font) will have little impact on usability except under the most extreme use conditions.

Don’t Look Futuristic. Look Like the Future

Once you identified the audience, you need to arrive at the specific aesthetic design. Your problem may be that in drawing inspiration from movies and computer games, you’re imitating a fictional vision of the future. By imitating something make-believe, your app looks make-believe –the audience associates the aesthetic with something trivial, not a dead-serious application to be used all day. That may be why it looks cheesy.

The solution is to look at real things for inspiration. What does your audience associate with the future? The F-35 fighter? The ISS? The Jaguar supercomputer? Exactly what you choose depends on what sort of future you want to convey. For example, is it the competitiveness of the F-35, or the cooperativeness of the ISS? You probably want your aesthetic design to evoke the functional design of your source of inspiration. For example, your dividing lines in the app could resemble the stealth-enhancing zig-zag lines of the F-35 landing gear doors. You probably don’t want to copy the aesthetic design from something else, even something real (e.g., the mural on the Jaguar). Like making a Xerox of a Xerox, you’re not going to come off as fresh and solid as the original. You want to be original yourself. By definition, anything already out there isn’t the future.

Don’t Look Like the Future. Be the Future

Maybe this isn’t about aesthetics at all, but about creating a new way of interacting with the app. You say your users will be heavy users of the apps. That means it’s worthwhile for them to learn an innovative user interface if that interface provides superior performance once the user has learned it. Maybe what your client really wants is an innovative control, or interface idiom, or communication channel that makes the app better for your users.

Maybe you can make your users more productive with integrated voice-and-gesture interaction. Maybe you need to use stereophonic sound to orient the user to items in physical space. Maybe it’s time for a head-mounted display. The exact innovation will depend on your user’s tasks and the technology available to address their issues. Study the users’ tasks for problems to solve, and study the HCI literature and other technologies for possible solutions.

This is the other way to mesh usability and aesthetics, where improving usability with innovation is the aesthetic.

share|improve this answer
    
Great answer. Thank you. The designer and I definitely have some work to do. –  thebringking Apr 1 '13 at 12:50

If your most important requirement is to look futuristic, then your best option is to look into the future and copy some of designs they will have been using.

And by "look into the future" I mean, of course, sci-fi movies and tv series, and possibly anime cartoons as well. Find the titles which depict interactions with computers, and see if that interface will make sense for your application.

Also, at this stage try to focus on WHAT you want to implement, and not on HOW you are going to do that. Static images or CSS shouldn't concern you at this point. First come up with the idea how your end product should look like; then cross-check with the client if that's what he wants; and only then put it into code.

share|improve this answer
    
The problem with that technique is that UIs created for Sci-fi films and the like aren't 'designed to be useful for particular tasks' as much as they are 'decorated to look cool for no particular reason'. –  DA01 Mar 31 '13 at 21:56
    
Exactly. As a front end engineer you can go to some of these pages like Call of Duty etc. The heavily decorated items are just static images. Looks great, but you can't do much with them. And actually staring at the site for too long is just too much. –  thebringking Apr 1 '13 at 12:53
    
@thebringking it's clear that you can't buy better than hollywood has already paid for. Rip of a design from a movie and make it responsive. –  New Alexandria Apr 1 '13 at 13:14

You might want to go hexagonal on this as they did with Conquist 2. I especially like the settings in the last screenshot, which open up if you click on the cog wheels. A mixture between the Windows 8 Metro design but with hexagons instead of squares should be visually appealing as well as usable.

share|improve this answer
    
Thank you for the suggestion! It looks polished for sure, however too game like. I do like the kind of flat look. –  thebringking Apr 1 '13 at 12:50

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.