5 ms·

Show HN: Fluid iPad App Concept

179 points by derwildemomo 15y ago

peteot 15y ago
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 http://en.wikipedia.org/wiki/Zooming_user_interface
Egregore 15y ago
It looks cool, I wonder if it is possible to implement something similar on Android devices.
- derwildemomo 15y ago
  sure, why not, I just started with iOS because.. well, I have an iPad :-)
- archivator 15y ago
  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..
teyc 15y ago
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 15y ago
  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 15y ago
    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 15y ago
      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.
augustl 15y ago
Is the video of an actual implemented app in use, or a mock up done in After Effects or similar?
- derwildemomo 15y ago
  actual implementation, fully functional, real data.
elii 15y ago
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 15y ago
  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 15y ago
    Yeah I think you definetely have to get your fingers on it for knowing if it makes sense or not. Visually it is winning!
dangrover 15y ago
This is pretty neat. Reminds me a bit of Push Pop Press's app.
ed209 15y ago
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 15y ago
  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.
gokhan 15y ago
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 15y ago
  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!
iCococabana 15y ago
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.
sushumna 15y ago
Awesome concept. Infact IKEA will contact you for making it official IKEA ipad App. All the best :)
king_magic 15y ago
Really nice job! I like it a lot.
- derwildemomo 15y ago
  thanks!
uptown 15y ago
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 15y ago
  right. ( sometimes, there is just nothing more to say :-) )
monopede 15y ago
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 15y ago
  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 :-)
maggit 15y ago
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 15y ago
  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 15y ago
    The ø and ö sound like the vowel in 'dirt'. The Swedish Chef makes the same mistake. 'Pøpcörn': http://youtu.be/B7UmUX68KtE http://youtu.be/B7UmUX68KtE
    - derwildemomo 15y ago
      hm so just like the german sound of 'ö' :-)
deleted 15y ago
[deleted]
siglesias 15y ago
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 15y ago
  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 ).
tsunamifury 15y ago
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 15y ago
  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!
6ren 15y ago
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 15y ago
  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.
deleted 15y ago
[deleted]
gdonelli 15y ago
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.
emehrkay 15y ago
What a great concept. I bet it would be great via the browser.
Zev 15y ago
This reminds me of Twitter for iPad, rotated 90°. Interesting idea, though.
aaronbrethorst 15y ago
Neat! I'd love to see the code behind this open sourced. If you do, please either add it to http://cocoacontrols.com 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 15y ago
  not going to os it soon, but i'll let you know as soon as i do :-)

179 points by derwildemomo 15y ago

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 http://en.wikipedia.org/wiki/Zooming_user_interface

Egregore 15y ago

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

derwildemomo 15y ago
sure, why not, I just started with iOS because.. well, I have an iPad :-)
archivator 15y ago
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..

teyc 15y ago

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 15y ago
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 15y ago
  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 15y ago
    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.

augustl 15y ago

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

derwildemomo 15y ago
actual implementation, fully functional, real data.

elii 15y ago

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 15y ago
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 15y ago
  Yeah I think you definetely have to get your fingers on it for knowing if it makes sense or not. Visually it is winning!

dangrover 15y ago

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

ed209 15y ago

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 15y ago
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.

gokhan 15y ago

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 15y ago
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!

iCococabana 15y ago

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.

sushumna 15y ago

Awesome concept. Infact IKEA will contact you for making it official IKEA ipad App. All the best :)

king_magic 15y ago

Really nice job! I like it a lot.

derwildemomo 15y ago
thanks!

uptown 15y ago

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 15y ago
right. ( sometimes, there is just nothing more to say :-) )

monopede 15y ago

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 15y ago
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 :-)

maggit 15y ago

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 15y ago
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 15y ago
  The ø and ö sound like the vowel in 'dirt'. The Swedish Chef makes the same mistake. 'Pøpcörn': http://youtu.be/B7UmUX68KtE http://youtu.be/B7UmUX68KtE
  - derwildemomo 15y ago
    hm so just like the german sound of 'ö' :-)

deleted 15y ago

[deleted]

siglesias 15y ago

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 15y ago
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 ).

tsunamifury 15y ago

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 15y ago
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!

6ren 15y ago

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 15y ago
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.

deleted 15y ago

[deleted]

gdonelli 15y ago

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.

emehrkay 15y ago

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

Zev 15y ago

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

aaronbrethorst 15y ago

Neat! I'd love to see the code behind this open sourced. If you do, please either add it to http://cocoacontrols.com 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 15y ago
not going to os it soon, but i'll let you know as soon as i do :-)