Surface-like interface: without using flash

10 Mar 2009 - 12:04pm
5 years ago
10 replies
657 reads
John Gibbard
2008

This is an interesting model of navigation [1]. A movement analogy, but this
implementation - as much as I can tell - is CSS-powered rather than Java.
Granted [1] is a simple portfolio site but I like the approach to
directional navigation. It provides a real sense of moving about an
environment, the second [2] site is a little less simplistic and I
consequently doesn't work quite as nicely. More stuff like this please
people....

John.

[1] <http://melissahie.com/> http://melissahie.com/
[2] http://www.annekejanneke.be/#go_nieuws

Comments

10 Mar 2009 - 12:29pm
stepheneighmey
2008

interesting.

i think with the first site you mean javascript, not java. i don't
think the css provides the animation. it is nice and smooth though.
i'm curious to see how it functions with javascript disabled.

the second site is a little chaotic and unfocused for my taste, but
an interesting idea.

nice ideas, but need some slight improvements in some elements.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=39775

10 Mar 2009 - 12:43pm
James Wanless
2009

Both are using javascript libraries, not java and not so much 'css-powered'
... although in the second case, the whole page gives the user an idea of
the horizontal scroll by virtue of the scrollbar, while the first does not
implement a scrollbar.

Both of these actually have similar approaches, but floating the navigation
persistently on the second one actually keeps the context a little more
consistent. In particular the second one is really one large page and
simply uses anchors to move around. I'm guessing the javascript is giving
the more pleasing scroll animation to the movement.

IMHO, while they are interesting approaches, I wouldn't want to see a whole
lot more of this. Other than the visual novelty of panning through content,
I'm not sure what the added value is for the user. In fact, other than a
simple portfolio, I would think that information rich sites would start to
breakdown quickly as users had to scroll vast areas of the page.

James

On Tue, Mar 10, 2009 at 11:04 AM, john at smorgasbord-design. co. uk <
john at smorgasbord-design.co.uk> wrote:

> This is an interesting model of navigation [1]. A movement analogy, but
> this
> implementation - as much as I can tell - is CSS-powered rather than Java.
> Granted [1] is a simple portfolio site but I like the approach to
> directional navigation. It provides a real sense of moving about an
> environment, the second [2] site is a little less simplistic and I
> consequently doesn't work quite as nicely. More stuff like this please
> people....
>
> John.
>
> [1] <http://melissahie.com/> http://melissahie.com/
> [2] http://www.annekejanneke.be/#go_nieuws
>
>
>

10 Mar 2009 - 12:51pm
James Wanless
2009

One further point, which frustrated me a lot upon a second look ...
the first one completely lacks the ability to navigate. Once you
start from the landing page, the javascript slider is hiding and
displaying divs as the user clicks the one prescribed link on each
page or div.

The problem with this is that it forces the user to go exactly where
the site wants them to. An important feature of a web site is that
the user should be in control of browsing through all relevant
information as they see fit, with navigation aiding their experience,
not killing it.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=39775

10 Mar 2009 - 1:10pm
John Gibbard
2008

Ok, ok, so I was thinking more about the *concept* of 360 degree
movement rather than the specific executions which - although
interesting - are not particularly great.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=39775

10 Mar 2009 - 1:26pm
Alex ONeal
2008

>From my perspective:

- This particular site's navigation is not useful for retail, education,
or any of a number of things - and luckily its purpose is none of those.
It's a display of skill and creativity by a recent graduate who's apparently
highly versed in front-end coding. Her strengths are design and
development, not IA or UX or interaction design. This may change in her
future, but I don't think she should be blamed for having fun with her
personal site.
- Depending on the site and the company, I've seen Java, Javascript,
flash, and various combinations thereof used to design navigation. CSS is a
great alternative to all of the above for attractive, dynamic menus, and
it's *searchable*. Showing me you can make CSS do more than is normally
required is a good thing for a portfolio site.

Personally I loved the feeling of being panned over a large, visually
appealing interactive poster. I'd hire her for front-end coding and graphic
design in a heartbeat if I could, and train her in information science. If
she could be turned, she could be a powerful ally for interaction design ;-)

bests,
Alex O'Neal
UX manager

--
The best time to plant a tree is twenty years ago. The next best time is
now.

10 Mar 2009 - 1:52pm
Andrew Boyd
2008

Hi John,

See also crumpler.com.au - it is Flash, but it is equally as annoying.

Best regards, Andrew

On Wed, Mar 11, 2009 at 5:04 AM, <john at smorgasbord-design.co.uk> wrote:
> This is an interesting model of navigation [1]. A movement analogy, but this
> implementation - as much as I can tell - is CSS-powered rather than Java.
> Granted [1] is a simple portfolio site but I like the approach to
> directional navigation. It provides a real sense of moving about an
> environment, the second [2] site is a little less simplistic and I
> consequently doesn't work quite as nicely. More stuff like this please
> people....
>
> John.
>
> [1]  <http://melissahie.com/> http://melissahie.com/
> [2] http://www.annekejanneke.be/#go_nieuws
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

--
---
Andrew Boyd
http://uxaustralia.com.au -- UX Australia Conference Canberra 2009
http://uxbookclub.org -- connect, read, discuss
http://govux.org -- the government user experience forum
http://resilientnationaustralia.org Resilient Nation Australia

12 Mar 2009 - 10:51am
John Gibbard
2008

Not sure I agree that pannable interfaces like this are "not useful
for retail". Retail isn't always about the purchase or acquisition
task - it can be about 'immersive', exploratory interfaces too.

Some more inspiration can be found at the universally useful Konigi
[1]

John

[1] http://konigi.com/interface/tags/pannable-user-interface-pui

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=39775

13 Mar 2009 - 8:15am
Mike Myles
2009

It feels like I'm using an old microfiche reader.

I'm not crazy about either of the two example sites, but the
approach has potential. I could see using it for image browsing, or
navigating a large map or floor plan. In those instances a zoom out
capability would be useful to see the entire page.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=39775

16 Mar 2009 - 2:13am
sajid saiyed
2005

This is like going down the path where flash has "been there, done that".

Few years back, everyone used to love these fancy Flash websites.
Things move around, fly past, jump, bounce etc.
Why? because it was easier to do it with flash.

Thats the past, everyone has realised that all of this does not add
any value to users (remember those days when you waited for so long
for the website to load and all it did was started playing an intro
with skip intro button?)

So to make it short, I think its an overkill to make javascript do
these fancy animations.
Javascript can be put to better use then this :)

btw. This is not new, if anyone here remembers DYNAPI. It was possible
to do these things way back in 2000 (or earlier maybe).

On this thought, I was surprised to see that DYNAPI still lives, but
never became as popular as Prototype or Moo tools.
Why???

-- Sajid

On Fri, Mar 13, 2009 at 10:15 PM, Mike Myles <mmyles2001 at yahoo.com> wrote:
> It feels like I'm using an old microfiche reader.
>
> I'm not crazy about either of the two example sites, but the
> approach has potential. I could see using it for image browsing, or
> navigating a large map or floor plan. In those instances a zoom out
> capability would be useful to see the entire page.
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://www.ixda.org/discuss?post=39775
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

16 Mar 2009 - 4:45am
Sascha Brossmann
2008

> This is not new, if anyone here remembers DYNAPI. It was possible to
do these things way back in 2000 (or earlier maybe).

Indeed. Bi-directionally scrolling the browser viewport with JS has
been possible (and used) for quite a loooong time now.

I strongly disagree on 'no value added', though. One size does not
fit for all. Never. See e. g. http://www.fonshickmann.com where
panning and scrolling is IMHO rather thoughfully and consistently
used (including nice details like employing it for stop-motion
animation).

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=39775

Syndicate content Get the feed