Show HN: Fluid iPad App Concept | Hacker News Reader

Show HN: Fluid iPad App Concept

momo.brauchtman.net

179 pointsderwildemomo40 comments

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.

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!

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?

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 ).

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.

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.

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?

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!

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)

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.

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 ;)

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... :-)

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

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

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

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.

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 :-)

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!

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

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.

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.

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

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.

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

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.

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

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.

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".

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.

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

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.

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

actual implementation, fully functional, real data.

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

sure, why not, I just started with iOS because.. well, I have an iPad :-)

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..

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

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

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

Really nice job! I like it a lot.

thanks!

Reply on news.ycombinator.com