pouët.net

Examples of beautiful, functional user interface?

category: offtopic [glöplog]
 
We're about to embark on some interesting projects at work, both on PC and console, developing user interfaces. These aren't games, but more like interactive magazines, kind of like a diskmag on a budget. I want to keep the products from looking too "shopped, " flat, or static, and I'm looking for inspiration.

I'm curious what interfaces stand out to you guys, either from scene productions or not. Demos, games, movies, whatever. People tend to think of menus as an afterthought, but I want to make them fun to use and cool to look at, without getting in the way of the actual content.
added on the 2010-09-23 07:06:29 by Jerware Jerware
er.... sorry, that should have read diskmag WITH a budget.
added on the 2010-09-23 07:08:18 by Jerware Jerware
as far as i can remember, zine #13 interface was very cool
added on the 2010-09-23 07:11:07 by elfh elfh
Luxo: I'd take a look at ZINE #13 yeah.
added on the 2010-09-23 08:34:58 by gloom gloom
quite a lot of the gameboy music disks have neat front ends, I'll just have a borse and post a few I like the look of
added on the 2010-09-23 09:10:57 by spiny spiny
copypaste the minority report interface theme and everyone will be happy with that ten years old fantafuturistic interface.
added on the 2010-09-23 09:14:24 by rmeht rmeht
http://www.pouet.net/prod.php?which=1793
http://www.pouet.net/prod.php?which=52065
http://www.pouet.net/prod.php?which=31094

theres another one that I can't find that had a small and simple black and white window that had background images of (Russian?) cityscapes that changed when the tunes changed, but I forget the name of it :)

I love musicdisks :)
added on the 2010-09-23 09:22:21 by spiny spiny
Making an interface that looks consistent and works well on both pc+mouse and console+joypad+possibly-a-motion-controller is going to be a huge challenge. You might want to look at some cross platform games that achieve this (RTS and simulation games maybe?) before worrying too much about asthetics, becuase you might find that you actually need the two interfaces to work quite differently.
added on the 2010-09-23 10:45:09 by evilpaul evilpaul
added on the 2010-09-23 10:57:39 by bdk bdk
BB Image

You're welcome!

Anyway I always thought this sort of thing is pretty neat (click "open publication"). The interface mimics a physical magazine, which makes it very easy to relate to and gives you a good framework for standard layouting. And it wouldn't be too unnatural if you tack on hyperlink navigation, embedded videos, interactive objects, live content or whatever.
added on the 2010-09-23 11:07:50 by doomdoom doomdoom
lol
added on the 2010-09-23 18:05:39 by Claw Claw
BB Image
added on the 2010-09-23 18:26:20 by Zplex Zplex
http://vimeo.com/8308056
added on the 2010-09-23 18:31:32 by u2 u2
Thanks all, for your suggestions (especially elfh, spiny, bdk, evilpaul, and U2). Some inspiring ideas there. Keep them coming!
added on the 2010-09-24 05:48:51 by Jerware Jerware
Quote:

You're welcome!

Anyway I always thought this sort of thing is pretty neat (click "open publication"). The interface mimics a physical magazine, which makes it very easy to relate to and gives you a good framework for standard layouting. And it wouldn't be too unnatural if you tack on hyperlink navigation, embedded videos, interactive objects, live content or whatever.


@Doom: it seems to me that an online publication that is identical to a physical one is not a very good design choice - for the computer platform - imo.
It's slow to navigate, wasteful in terms of how it uses the screen space, and unnecessarily linear .. no smart linking between information here. Also: turning a page on a computer? Really?

The main reason they are used on the web is that it's possible to take existing materials, i.e. the PDFs or indesign files they gave to the printers, and convert them directly without any further work. Now don't get me wrong, it's cool that you can go on the web and see what Netto has on offer this week, but only as a replacement for a physical ad catalog - if you were looking to make something that's really cool or innovative, UI-wise, I wouldn't go down this route.
added on the 2010-09-24 10:51:54 by farfar farfar
plaf wins the thread.
added on the 2010-09-24 11:39:20 by gloom gloom
plaf: this mimics a paper but has animations etc. quite nice actually - and the layout is prettier than html
Magazines have a hundred years or more of practice in getting the layout right, better build on that than forget it and start from scratch :)

Doesn't mean you can't move it forward a long way of course. One thing I've seen that works quite well is to have an initial magazine-style layout, so you get a fair bit of information presented in a nice way, then when you select an article it zooms in with a nice animation to be presented alone (and without page turning crap, either scrolling or some other transition between sections works better).
added on the 2010-09-24 12:09:49 by psonice psonice
Yes, traditional = outdated is a silly misconception. Especially if you're not just trying to innovate for the sake of innovation, but actually care about marketing and sales.

A magazine is slower to navigate than most other interfaces, but that can be mitigated in any number of ways. There's no reason you can't have a table of contents with hyperlinks to other pages, bookmarks, search functions and whatever. Think of the magazine idea as a foundation to build on rather than a complete package.

Also, slower navigation doesn't have to be strictly a bad thing. There are marketing issues (value of ad space, ability to prioritise content etc.), and it gives you more creative control over the user's experience of reading the publication. Readers of regular internet publications tend to just skim the front page/TOC, scanning for "interesting words", following "related article" links, and ultimately seeing only a small fraction of the content. By contrast, when people read those online ad catalogs they actually page through the whole thing, which in itself is very valuable to both the publisher and the artists involved.

And consider ad space again for a minute, and how desperate websites are getting lately to make you watch their ads. You never get quite so annoyed with a magazine, even if you run across a two-page ad. And at the same time ad space in magazines have maintained a value proportional to the number of readers. So magazines definately have that advantage over websites.
added on the 2010-09-24 15:32:31 by doomdoom doomdoom
Rasmus: imo that is a bloody nightmare :) small, unreadable fonts, crappy, scaled video with crappy quality, completely linear navigation.. argh!

psonice: this is not about forgetting best practices, or about forgetting 100+ years of accumulated design & layout knowledge. It's about the wrongness of using a print&paper paradigm as *the sole basis* for a non-print&paper, digital platform. Magazines are the way they are mainly for technical reasons, related to printing presses, paper sizes etc. That we should suffer those same restrictions on a digital platform doesn't make sense. Again: take what you want of the good things (that is, mainly good things relating to how you layout stuff effectively and aesthetically pleasing), but be very aware of the problems inherent in simply applying said print&paper paradigm to a digital platform. It's lazy and sloppy, and like I said, various companies only do it because they can reuse their existing mags, rather than having to go to the trouble of making something new.

Doom: sure, you can mitigate lots of stuff. You can insert videos, like Rasmus showed in that link, and you can hyperlink from page to page. The link you posted earlier isn't actually *that* bad, since you can press a button and see a page of page thumbnails, and jump around in the mag, whereas Rasmus' link seems to be entirely linear. I hate that.

I mean, don't get me wrong, physical magazines are great. Physical magazines, that is.

added on the 2010-09-24 16:20:11 by farfar farfar
BB Image
added on the 2010-09-24 17:04:36 by trc_wm trc_wm

login