Swiping between cards - metaphor end-of-the-road?

classic Classic list List threaded Threaded
11 messages Options
Reply | Threaded
Open this post in threaded view
|

Swiping between cards - metaphor end-of-the-road?

Mike Kerner via use-livecode
I stumbled across this thread and it got me thinking:
http://forums.livecode.com/viewtopic.php?f=7&t=29184

LC has cards, which are great for many things but somewhat limited.

For example, as the OP asks about there: how does one swipe between them?

That seems a perfectly reasonable expectation, given what cards are and
the central role they play in LC's object model and language.

And yet we don't really have any way of doing that.

Doing it right on mobile would mean some drag-triggered transition which
responds to the drag movement itself, and could be canceled if the user
releases their finger before a certain mid-screen threshold is reached.

Of course we can do that with groups, but consider what that means:

We'd have to construct all of our layouts on a single card, and have
some means of moving the groups on and off screen as needed, both during
development and at runtime.

All doable, and not too much of a brain-bender.

But it's work.  And non-obvious to newcomers.  And even for experienced
devs it's tedious.

And at that point, the beautiful simplicity of the card metaphor breaks
down.  Indeed, it's no longer even relevant because we're not using
cards at all, but groups on a single card.

At that point, some of the advantage of choosing LiveCode is lost,
because one of the most central elements of its object model is no
longer a best fit for today's designs.

Modern UIs (most mobile and increasingly on desktop as well) benefit
from providing a sense of unifying flow with, among other things,
interactive drag actions as transitions between screen layouts.

I was considering putting in a feature request for a new drag
transition, but before I do I think we need some design work to figure
out exactly what it should do and how we work with it.

It's not even a transition per se, since those are discrete visual
operations performed after a user action has been completed (e.g., a
mouses click or a menu selection).

This seems perhaps a good candidate for a property, maybe something like
"the dragTransitions" of a stack.  When true, any drag actions not
handled by any script would be handled by the engine by dragging a
transition from card to card according to the direction of the drag.

That may be too simplistic, though. Do we really want free travel
between all cards in a stack?  If not, how do we specify what happens in
response to a drag when we want a card-to-card transition?

--
  Richard Gaskin
  Fourth World Systems
  Software Design and Development for the Desktop, Mobile, and the Web
  ____________________________________________________________________
  [hidden email]                http://www.FourthWorld.com

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: Swiping between cards - metaphor end-of-the-road?

Mike Kerner via use-livecode
So you'd like a swipe event instead of using nav buttons.
_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: Swiping between cards - metaphor end-of-the-road?

Mike Kerner via use-livecode
Mike Kerner wrote:

 > So you'd like a swipe event instead of using nav buttons.

Button where appropriate, swiping where appropriate.


iOS:
    Use touch gestures to create fluidity. Make it easy to move
    through your interface with minimum friction. For example,
    you could let people swipe from the side of the screen to
    return to the previous screen.
<https://developer.apple.com/ios/human-interface-guidelines/interaction/navigation/>


Android:
    Efficient navigation is one of the cornerstones of a
    well-designed app. While apps are generally built in
    a hierarchical fashion, there are instances where
    horizontal navigation can flatten vertical hierarchies
    and make access to related data items faster and more
    enjoyable. Swipe views allow the user to efficiently
    move from item to item using a simple gesture and
    thereby make browsing and consuming data a more
    fluent experience.
<https://developer.android.com/design/patterns/swipe-views.html>


--
  Richard Gaskin
  Fourth World Systems
  Software Design and Development for the Desktop, Mobile, and the Web
  ____________________________________________________________________
  [hidden email]                http://www.FourthWorld.com

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: Swiping between cards - metaphor end-of-the-road?

Mike Kerner via use-livecode
so bug 9320?

On Wed, Apr 26, 2017 at 2:50 PM, Richard Gaskin via use-livecode <
[hidden email]> wrote:

> Mike Kerner wrote:
>
> > So you'd like a swipe event instead of using nav buttons.
>
> Button where appropriate, swiping where appropriate.
>
>
> iOS:
>    Use touch gestures to create fluidity. Make it easy to move
>    through your interface with minimum friction. For example,
>    you could let people swipe from the side of the screen to
>    return to the previous screen.
> <https://developer.apple.com/ios/human-interface-guidelines/
> interaction/navigation/>
>
>
> Android:
>    Efficient navigation is one of the cornerstones of a
>    well-designed app. While apps are generally built in
>    a hierarchical fashion, there are instances where
>    horizontal navigation can flatten vertical hierarchies
>    and make access to related data items faster and more
>    enjoyable. Swipe views allow the user to efficiently
>    move from item to item using a simple gesture and
>    thereby make browsing and consuming data a more
>    fluent experience.
> <https://developer.android.com/design/patterns/swipe-views.html>
>
>
>
> --
>  Richard Gaskin
>  Fourth World Systems
>  Software Design and Development for the Desktop, Mobile, and the Web
>  ____________________________________________________________________
>  [hidden email]                http://www.FourthWorld.com
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your
> subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
>



--
On the first day, God created the heavens and the Earth
On the second day, God created the oceans.
On the third day, God put the animals on hold for a few hours,
   and did a little diving.
And God said, "This is good."
_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: Swiping between cards - metaphor end-of-the-road?

Mike Kerner via use-livecode
Mike Kerner wrote:
 > On Wed, Apr 26, 2017 at 2:50 PM, Richard Gaskin wrote:
 >
 >> Mike Kerner wrote:
 >> > So you'd like a swipe event instead of using nav buttons.
 >>
 >> Button where appropriate, swiping where appropriate.
...
 > so bug 9320?

I suppose it's related, but indirectly.  That request is for access to
iOS-specific gesture APIs.  Those should be accessible through FFI, no?

Either way, the gestures themselves are only part of the challenge.  In
fact, for card swiping we need only one, a swipe. The bigger part is
handling the dual-card render during the gesture.

--
  Richard Gaskin
  Fourth World Systems
  Software Design and Development for the Desktop, Mobile, and the Web
  ____________________________________________________________________
  [hidden email]                http://www.FourthWorld.com

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: Swiping between cards - metaphor end-of-the-road?

Mike Kerner via use-livecode
In reply to this post by Mike Kerner via use-livecode
This is an important subject, I've been meaning to write this for a couple of weeks, but Richard got here first.

our current app.

(if anyone is interested I can send you the git repo link off line…it is public;  I just don't want to post It public)

use click and swipe "everywhere"

the model is simple: group of rows (smaller groups) whole "portal" group is scrollable

each row is a "hyper link" to
a) a dynamic rebuild of the card with differernt rows
b) open another *module.livecode binary stack
c) open a stack that has a browser widget on it the URL to view pass to it dynamically.

Seeims simple enough, works great on desk top… so much promise for a highly scalable modular app.

 but are are getting major failures on mobile and I have been wrestling for weeks with the the simple problem of just opening and closing stacks without crashing or render issuea (mostly on Android) and performance (super slow on some android devices) Once any given stack is actually opened and rendering correctly, it works great.  

Anyway, the need to respond to a touch/aka/mouseup  OR swipe the group up and down.

That's the tricky bit

Currently we are (pseudo code)

 using locals to get the tStartLoc on mousedown and using

if the  abs(the endloc) > 10  # assume swipe
else
assume tap: fire the hyper link

I'm having issue with this. can't quite figure out why, but I have to tap twice to fire the touch event… could be the code needs top be optimized there.  and standard mouse/widget/icon/image with just a mouseup alone, fires instantly.

This is not exactly focusing on the card metaphor… but the issues are the same. (I think)  Because you might want to trap the touch on a card and not actually swipe left or right, group up/down/sideways


Suffice it so say we do need improvements here.  I have a lot of design requirements that would use this algorithm

all modern apps do this… verycommon now to load (sometimes over load IMHO) a single interface with scrolling groups going sideways… all of which are basically create a giant TOC/Index to dive into some other screen/list/listen to music (Spotify is a very good model)


" While apps are generally built in
    a hierarchical fashion, there are instances where
    horizontal navigation can flatten vertical hierarchies
    and make access to related data items faster and more
    enjoyable."


Anyone else doing the

touch or swipe  thing?  on a scrolling group/card can you share your code methods for this?  I would like to test and improve what we have if possible.



BR



 

On 4/26/17, 8:50 AM, "use-livecode on behalf of Richard Gaskin via use-livecode" <[hidden email] on behalf of [hidden email]> wrote:

    Mike Kerner wrote:
   
    > So you'd like a swipe event instead of using nav buttons.
   
    Button where appropriate, swiping where appropriate.
   
   
    iOS:
        Use touch gestures to create fluidity. Make it easy to move
        through your interface with minimum friction. For example,
        you could let people swipe from the side of the screen to
        return to the previous screen.
    <https://developer.apple.com/ios/human-interface-guidelines/interaction/navigation/>
   
   
    Android:
        Efficient navigation is one of the cornerstones of a
        well-designed app. While apps are generally built in
        a hierarchical fashion, there are instances where
        horizontal navigation can flatten vertical hierarchies
        and make access to related data items faster and more
        enjoyable. Swipe views allow the user to efficiently
        move from item to item using a simple gesture and
        thereby make browsing and consuming data a more
        fluent experience.
    <https://developer.android.com/design/patterns/swipe-views.html>

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: Swiping between cards - metaphor end-of-the-road?

Mike Kerner via use-livecode
In reply to this post by Mike Kerner via use-livecode
On 4/26/2017 3:02 PM, Richard Gaskin via use-livecode wrote:
> Either way, the gestures themselves are only part of the challenge.
> In fact, for card swiping we need only one, a swipe. The bigger part
> is handling the dual-card render during the gesture.


This would work (in theory) for the visualization except that didn't
visual effect end in LC 8 with deprecating quicktime?

  visual effect wipe left slowly
  go next cd


_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: Swiping between cards - metaphor end-of-the-road?

Mike Kerner via use-livecode
Maybe each card could have a parameter like "swipeTo" which would be the id
of another card. Default could be nothing, which would disable swipe. But
if there's a card id in there then swiping would put that card "underneath"
so it's visible as the current card moves and if the swipe gesture
completes the stack moves to that new card.

The swipe gesture might be just a scroll that's handled as a swipe when the
card can't scroll in that direction. Like if you swipe up/down the content
scrolls, but if you swipe left/right, since there's no scroll in that
direction, you get a swipe to another card.

On Wed, Apr 26, 2017 at 1:41 PM, Paul Dupuis via use-livecode <
[hidden email]> wrote:

> On 4/26/2017 3:02 PM, Richard Gaskin via use-livecode wrote:
> > Either way, the gestures themselves are only part of the challenge.
> > In fact, for card swiping we need only one, a swipe. The bigger part
> > is handling the dual-card render during the gesture.
>
>
> This would work (in theory) for the visualization except that didn't
> visual effect end in LC 8 with deprecating quicktime?
>
>   visual effect wipe left slowly
>   go next cd
>
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your
> subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
>
_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: Swiping between cards - metaphor end-of-the-road?

Mike Kerner via use-livecode
In reply to this post by Mike Kerner via use-livecode
Paul Dupuis wrote:

 > On 4/26/2017 3:02 PM, Richard Gaskin via use-livecode wrote:
 >> Either way, the gestures themselves are only part of the challenge.
 >> In fact, for card swiping we need only one, a swipe. The bigger part
 >> is handling the dual-card render during the gesture.
 >
 >
 > This would work (in theory) for the visualization except that didn't
 > visual effect end in LC 8 with deprecating quicktime?
 >
 >   visual effect wipe left slowly
 >   go next cd

That will give us an appearance suitable for a discrete action, like a
button click, but it won't track the user's finger.

A true swipe follows the user's finger, and even cancels by swiping back
into the original position if the user releases their finger before a
certain horizontal threshold is reached.

--
  Richard Gaskin
  Fourth World Systems
  Software Design and Development for the Desktop, Mobile, and the Web
  ____________________________________________________________________
  [hidden email]                http://www.FourthWorld.com

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: Swiping between cards - metaphor end-of-the-road?

Mike Kerner via use-livecode
In reply to this post by Mike Kerner via use-livecode
Matt Maier wrote:

 > Maybe each card could have a parameter like "swipeTo" which would be
 > the id of another card. Default could be nothing, which would disable
 > swipe. But if there's a card id in there then swiping would put that
 > card "underneath" so it's visible as the current card moves and if
 > the swipe gesture completes the stack moves to that new card.
 >
 > The swipe gesture might be just a scroll that's handled as a swipe
 > when the card can't scroll in that direction. Like if you swipe
 > up/down the content scrolls, but if you swipe left/right, since
 > there's no scroll in that direction, you get a swipe to another card.

I like where you're going with that.  But it also suggests other options
that would be useful, more stuff to think over before submitting a request.

Rather than a single swipeDestination property to designate which card
we go to during a swipte, ideally we'd want that for each of the four
cardinal directions, e.g. swipeLeftDestination, swipeTopDestination, etc.

Also, it would be nice to be able to specify the origin threshold, since
sometimes we'd want to initiate a drag from any part of the card and
other times only from a certain edge.

Hmmm...not so simple once we dive into the full range of use-cases, but
I do think it's worth exploring this here because it would be SOOOOO
much simpler to use LC's card metaphor for modern apps if we had more
fluid transition capabilities.

--
  Richard Gaskin
  Fourth World Systems
  Software Design and Development for the Desktop, Mobile, and the Web
  ____________________________________________________________________
  [hidden email]                http://www.FourthWorld.com

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: Swiping between cards - metaphor end-of-the-road?

Mike Kerner via use-livecode
That's a good point. Android apps commonly uses "swipe down" to trigger a
refresh. The swipe still physically happens, but there's just a gray
background behind it, and it pops back into place and resets.

The main problem seems to be what happens during a swipe. Part of the
effect is the feedback of seeing one card move on top of another. After the
swipe is completed we can just use regular messages to do whatever.

Another swipe effect would be pulling the next card in to fill the space
left by the moving card, rather than the next card being stationary
underneath.

On Thu, Apr 27, 2017 at 10:30 AM, Richard Gaskin via use-livecode <
[hidden email]> wrote:

> Matt Maier wrote:
>
> > Maybe each card could have a parameter like "swipeTo" which would be
> > the id of another card. Default could be nothing, which would disable
> > swipe. But if there's a card id in there then swiping would put that
> > card "underneath" so it's visible as the current card moves and if
> > the swipe gesture completes the stack moves to that new card.
> >
> > The swipe gesture might be just a scroll that's handled as a swipe
> > when the card can't scroll in that direction. Like if you swipe
> > up/down the content scrolls, but if you swipe left/right, since
> > there's no scroll in that direction, you get a swipe to another card.
>
> I like where you're going with that.  But it also suggests other options
> that would be useful, more stuff to think over before submitting a request.
>
> Rather than a single swipeDestination property to designate which card we
> go to during a swipte, ideally we'd want that for each of the four cardinal
> directions, e.g. swipeLeftDestination, swipeTopDestination, etc.
>
> Also, it would be nice to be able to specify the origin threshold, since
> sometimes we'd want to initiate a drag from any part of the card and other
> times only from a certain edge.
>
> Hmmm...not so simple once we dive into the full range of use-cases, but I
> do think it's worth exploring this here because it would be SOOOOO much
> simpler to use LC's card metaphor for modern apps if we had more fluid
> transition capabilities.
>
> --
>  Richard Gaskin
>  Fourth World Systems
>  Software Design and Development for the Desktop, Mobile, and the Web
>  ____________________________________________________________________
>  [hidden email]                http://www.FourthWorld.com
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your
> subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
>
_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode