

Show HN: Fluid iPad App Concept  - derwildemomo
http://momo.brauchtman.net/2011/09/16/ipad-app-concept-based-on-a-fluid-layout/

======
gokhan
Neat concept. The following behavior bugged me through the whole demo:

You switch to Lightning from IKEA FAMILY products and second level shows
spotlights, ceiling lamps etc. But the third level stays at travel products
(since nothing on second level is reselected). If I put the device away and
come back later, visual representation won' help and I'll have to memorize
where I am.

~~~
derwildemomo
Right, the super-fancy "panels move out if another top-level element is
selected" isn't implemented yet. So you're actually observing a bug, but I
should have at least avoided it in the video.. thanks!

------
siglesias
Sorry, dumb question, but why fluid as opposed to modal? iPad users are used
to browsing products modally and there don't seem to be any usability issues
with it: there is a clear navigation stack as well as full focus on the
product pages.

You have a fascinating concept. Could you explain some of your thinking on why
you think this particular paradigm is superior?

~~~
derwildemomo
not a dumb question at all.

first let me clarify that i don't oppose the modal model in any way – as you
said, it works just fine. My motivation was to find out whether the fluid
model a) also works and b) has any advantages, and if yes which ones.

I didn't come to a conclusion so far, but I have observed some interesting
stuff, both on the pro and con side: \- Once understood, the interface makes
navigation considerably faster \- The individual space for content is
necessarily smaller and \- The individual content panes have to adjust to the
constraint that their content can only adjust horizontally, as the vertical
axis is reserved for the navigation.

I am opposed to saying that modal is inferior or something like that, it
always depends on the context, the use case. In this very special case, it
might be a better solution, but in many others, it fails hard ( think, for
example, mail ).

------
6ren
It's an alternative to overlapping windows, a fundamental of the desktop
metaphor.

I seem to recall seeing a demo of something similar, that was also from PARC
(or maybe just in the same era, i.e. the 60's). Of course, the desktop
metaphor won, and work didn't continue on the other. I mention it not to
preempt you, but because seeing that work would give you an extra perspective,
and a bunch of experiments for free to see what works/doesn't work.

Or maybe it was an infinite desktop, where you could zoom in/out to find
things. Would that count as "fluid"? Sorry, think I'm rambling.

~~~
georgemcbay
You are probably thinking of Jef Raskin's ideas for zoomable interfaces, as
described in "The Humane Interface" and seen in various demos he produced.

A lot of people (chief among them, Microsoft with projects like Seadragon)
have been rediscovering this as a useful idea.

------
tsunamifury
Its interesting to me because the navigation combines with breadcrumbs to be a
rather effecient hybrid. The design that allows that to happen seems to work
very well with product based content (photos, square items etc).

But what about long flowing content like text? Little chunks of square text
scrolling horizontally wouldn't exactly be the best reading experience. Have
you come up with a different design to handle that?

~~~
derwildemomo
as you can see in the "product detail row", I'm still struggling with that one
– good catch. Haven't developed anything cool yet for that particular problem.
But it's on the list!

------
ed209
This looks really cool, love it when people experiment with UI.

It's hard to judge from a video vs actually using it. The only issue I have is
that I felt a bit lost a few levels in. It would be nice to have some
reference of how deep you are. Instead of losing previous levels entirely is
there a way to keep them (like the traditional breadcrumb used to do)

~~~
derwildemomo
Actually, it was one of my intentions to completely eliminate breadcrumbs, as
the one gesture that will sooner or later get you to where you want to be is
.. moving up. On the other hand, Some tiny visual hint would certainly help
some people using it.

At the moment, actually using it is still a bit painful ( there are some edge
cases not properly handled all the time ), but generally this is a lot faster
already then the ikea website or their own catalog app.

------
maggit
Trivia, if you are interested: "ø" is a Danish and Norwegian character. The
corresponding one in Swedish is "ö". So I suppose you are scared of IKEA
"shööting" you.

(Also, the Swedish "ö" sounds completely different from the English "o", so
it's a bit silly if you know how to read it ;)

~~~
derwildemomo
Nice that you noticed that, and thanks for the hint. but i guess i'll leave it
that way, it just looks so swedish to me.. hm... :-)

~~~
Samuel_Michon
The ø and ö sound like the vowel in 'dirt'.

The Swedish Chef makes the same mistake. 'Pøpcörn':
<http://youtu.be/B7UmUX68KtE>

~~~
derwildemomo
hm so just like the german sound of 'ö' :-)

------
monopede
Sorry to break the stream of cheers, but I have my concerns about this design.
Yes, it's a neat idea and already quite well-implemented. Looking at the video
I can't help but feel confused. Sometimes things seem to resize randomly (at
places where there is no cursor shown -- is there an input not shown?) and I
have my doubts what "normal" users would do. I strongly recommend that you do
grab a few people with medium technical background and ask them to perform a
few tasks and then just observer (no helping). That should quickly tell you
where (if) people get lost. Good work overall, but keep refining.

~~~
derwildemomo
Upcoming this weekend, I just finished the app so far last night, but I'm also
very curious how people are going to interact and understand the interface.
Concerning the random resizing, I mentioned it in another comment, it's one of
the very subtle things that has to be done exactly right, otherwise it creates
this awkward 'what the hell is going on' impression. I'm definitely on this
:-)

------
teyc
It is good looking. The easing should accelerate towards the end, in order to
feel more like rollerblinds coiling up. When you select the individual items
around 00:40 to 00:43 you should also work in a subtle animation so that it is
just as fluid as the rest.

Overall, very well done!

~~~
derwildemomo
right. Overall, the animations are the hardest part – and I guess that they
have some iterations until everything works smooth and 'shippable'. thank you!

~~~
elisee
Yep the animations definitely need some work to feel more natural. It should
be very short, just enough to let the user feels that it's not jumping from A
to B, but not long enough to introduce delays during which what you want to
touch is moving around.

Also, the deeper you go in the hierarchy, the smaller the new menus open. It
made me feel like the app was running out of space to show stuff. Maybe it
could be more aggressive with downsizing the parents so it leaves more room
for what you're currently looking at?

Anyway, great concept.

~~~
derwildemomo
well, the resizing is quite tricky. the problem is that you need to anticipate
as much as possible, while not destroying the sizing scheme the user layed
out. You are right that it seems a bit like running out of space, but I just
haven't found a good way to solve this dilemma yet – it wasn't aggressive
resizing, that felt totally wrong ( that was my first take on the problem, too
). But you don't want your interface to just "do something" on your behalf, at
least that's what I think.

------
peteot
Reminds me of the ZUI (zooming user interface) concept. I think the prototype
is worth exploring further, maybe borrowing on some of the ZUI research to
avoid any pitfalls they've already experienced.

<http://en.wikipedia.org/wiki/Zooming_user_interface>

------
uptown
Very cool implementation. I'd suggest keeping the product panel (bottom-most
panel) fully expanded when you're at that level in the hierarchy. Around 0:26
seconds it's awkward that it doesn't auto-expand to fill the available space
as the rest of the navigation hierarchy slides up.

~~~
derwildemomo
right. ( sometimes, there is just nothing more to say :-) )

------
aaronbrethorst
Neat! I'd love to see the code behind this open sourced. If you do, please
either add it to <http://cocoacontrols.com>, or shoot me an email at
aaron@brethorsting.com with a link to the repo and I'll take care of it.

~~~
derwildemomo
not going to os it soon, but i'll let you know as soon as i do :-)

------
iCococabana
You can use a view controller for this concept. It would hook up to a XIB with
the components you need.

In Interface Builder you would create the scrolling objects, then animate
those objects in the code according to touch events.

------
elii
Wow, this looks really awesome! It's like the Twitter iPad app but a step
further. I wonder if it's also usable besides the "cool looking".

~~~
derwildemomo
that's the question I've been asking myself for the past 2 weeks. And after
putting quite some work in there I'm sure it is.

~~~
elii
Yeah I think you definetely have to get your fingers on it for knowing if it
makes sense or not. Visually it is winning!

------
gdonelli
This is really Mike Mattas' "Our Choice" iPad App design, with n-degrees of
freedom.

I think "Our Choice" limits the nesting 2-3 levels.

------
augustl
Is the video of an actual implemented app in use, or a mock up done in After
Effects or similar?

~~~
derwildemomo
actual implementation, fully functional, real data.

------
Egregore
It looks cool, I wonder if it is possible to implement something similar on
Android devices.

~~~
archivator
It should be, using the Fragments API. However, with Android drawing
everything on the CPU, it would turn out to be rather slow, I fear. Maybe
RenderScript would be a better option..

------
Zev
This reminds me of Twitter for iPad, rotated 90°. Interesting idea, though.

------
emehrkay
What a great concept. I bet it would be great via the browser.

------
dangrover
This is pretty neat. Reminds me a bit of Push Pop Press's app.

------
king_magic
Really nice job! I like it a lot.

~~~
derwildemomo
thanks!

