Scrolling Groups on Mobile - Show a little of what is below

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

Scrolling Groups on Mobile - Show a little of what is below

Tom Glod via use-livecode
FYI this is a tip that came from Jacque, but I had to experience it "live" myself. Alex though it useful to share…

On a busy day here (we have 100 plus visitors daily) I will go outside and get complete strangers to  download the new app and watch them as they go thru initial install and usage.

Fascinating to watch e.g. our pixel perfect fit of rows on the home screen is for a scrolling group that has more rows below screen.. But this is "wrong" because the proper way to do it is, says Jacque: create the rows so the bottom one is a bit cut off, otherwise a subset of users never try to scroll up!

Yep.. I had several users tap on the content to go to the links that appeared there. they would go "home" and tap the next one.. and never swipe up…

They think what they see it all there is.  But when you show half of a row at the bottom, the user instinctively swipes up…… But the screens were designed by a graphic designer who does magazine design… not app design… so his design instinct is for the printed page and he will always strive for a "perfect fit"  and all trouble we went to take 736 pixes height, subtract the hero image on top and divide the remainder *exactly* so that row would fit precisely.. only shot our UX in the foot… ha!

from the land of

Things you will never know
unless you watch over someone's shoulder
while they try to use your software.

BR
_______________________________________________
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: Scrolling Groups on Mobile - Show a little of what is below

Tom Glod via use-livecode
Hi BR

What's lacking is the visual feedback that there's something "more"...

One way you might give an indication could be to flash the mobile scrollbars to show how much of the group is visible.

e.g.
smControlSet sScrollerID, "indicatorStyle", "white"
smControlSet sScrollerID, "vIndicator", true

I can't remember now if the indicator flashes by itself or not, but if not then just send messages in time to show then hide then show again to "flash" it...

Maybe that'd work?

HTH

cheers

Alan

> On 21 Sep 2017, at 2:50 pm, Sannyasin Brahmanathaswami <[hidden email]> wrote:
>
>
> FYI this is a tip that came from Jacque, but I had to experience it "live" myself. Alex though it useful to share?
>
> On a busy day here (we have 100 plus visitors daily) I will go outside and get complete strangers to  download the new app and watch them as they go thru initial install and usage.
>
> Fascinating to watch e.g. our pixel perfect fit of rows on the home screen is for a scrolling group that has more rows below screen.. But this is "wrong" because the proper way to do it is, says Jacque: create the rows so the bottom one is a bit cut off, otherwise a subset of users never try to scroll up!
>
> Yep.. I had several users tap on the content to go to the links that appeared there. they would go "home" and tap the next one.. and never swipe up?
>
> They think what they see it all there is.  But when you show half of a row at the bottom, the user instinctively swipes up?? But the screens were designed by a graphic designer who does magazine design? not app design? so his design instinct is for the printed page and he will always strive for a "perfect fit"  and all trouble we went to take 736 pixes height, subtract the hero image on top and divide the remainder *exactly* so that row would fit precisely.. only shot our UX in the foot? ha!
>
> from the land of
>
> Things you will never know
> unless you watch over someone's shoulder
> while they try to use your software.
>
> BR


_______________________________________________
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: Scrolling Groups on Mobile - Show a little of what is below

Tom Glod via use-livecode
I agree with J.  The simplest visual cue that there is something in the box
is for the lid to be ajar.  Cabinets with the door ajar begged to be open.
Doors that are mostly but not completely closed are the same way.  Lists
should carry the same cue.

On Thu, Sep 21, 2017 at 1:45 AM, Alan via use-livecode <
[hidden email]> wrote:

> Hi BR
>
> What's lacking is the visual feedback that there's something "more"...
>
> One way you might give an indication could be to flash the mobile
> scrollbars to show how much of the group is visible.
>
> e.g.
> smControlSet sScrollerID, "indicatorStyle", "white"
> smControlSet sScrollerID, "vIndicator", true
>
> I can't remember now if the indicator flashes by itself or not, but if not
> then just send messages in time to show then hide then show again to
> "flash" it...
>
> Maybe that'd work?
>
> HTH
>
> cheers
>
> Alan
>
> > On 21 Sep 2017, at 2:50 pm, Sannyasin Brahmanathaswami <[hidden email]>
> wrote:
> >
> >
> > FYI this is a tip that came from Jacque, but I had to experience it
> "live" myself. Alex though it useful to share?
> >
> > On a busy day here (we have 100 plus visitors daily) I will go outside
> and get complete strangers to  download the new app and watch them as they
> go thru initial install and usage.
> >
> > Fascinating to watch e.g. our pixel perfect fit of rows on the home
> screen is for a scrolling group that has more rows below screen.. But this
> is "wrong" because the proper way to do it is, says Jacque: create the rows
> so the bottom one is a bit cut off, otherwise a subset of users never try
> to scroll up!
> >
> > Yep.. I had several users tap on the content to go to the links that
> appeared there. they would go "home" and tap the next one.. and never swipe
> up?
> >
> > They think what they see it all there is.  But when you show half of a
> row at the bottom, the user instinctively swipes up?? But the screens were
> designed by a graphic designer who does magazine design? not app design? so
> his design instinct is for the printed page and he will always strive for a
> "perfect fit"  and all trouble we went to take 736 pixes height, subtract
> the hero image on top and divide the remainder *exactly* so that row would
> fit precisely.. only shot our UX in the foot? ha!
> >
> > from the land of
> >
> > Things you will never know
> > unless you watch over someone's shoulder
> > while they try to use your software.
> >
> > BR
>
>
> _______________________________________________
> 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: Scrolling Groups on Mobile - Show a little of what is below

Tom Glod via use-livecode
That used to be a scroll bar. Of course mobile devices do not have those, they have wheels. Perhaps using a scrolling wheel is a better choice for lists.

Bob S


> On Sep 21, 2017, at 08:14 , Mike Kerner via use-livecode <[hidden email]> wrote:
>
> I agree with J.  The simplest visual cue that there is something in the box
> is for the lid to be ajar.  Cabinets with the door ajar begged to be open.
> Doors that are mostly but not completely closed are the same way.  Lists
> should carry the same cue.


_______________________________________________
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: Scrolling Groups on Mobile - Show a little of what is below

Tom Glod via use-livecode
It has to be visible, which is a problem on ios, at least.

On Thu, Sep 21, 2017 at 11:20 AM, Bob Sneidar via use-livecode <
[hidden email]> wrote:

> That used to be a scroll bar. Of course mobile devices do not have those,
> they have wheels. Perhaps using a scrolling wheel is a better choice for
> lists.
>
> Bob S
>
>
> > On Sep 21, 2017, at 08:14 , Mike Kerner via use-livecode <
> [hidden email]> wrote:
> >
> > I agree with J.  The simplest visual cue that there is something in the
> box
> > is for the lid to be ajar.  Cabinets with the door ajar begged to be
> open.
> > Doors that are mostly but not completely closed are the same way.  Lists
> > should carry the same cue.
>
>
> _______________________________________________
> 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: Scrolling Groups on Mobile - Show a little of what is below

Tom Glod via use-livecode
and even the presence of a scrollbar on a desktop interface doesn't really
jump up and say "THERE'S MORE!" because it can be disabled due to there not
being anything more.  The difference can be subtle.

On Thu, Sep 21, 2017 at 11:26 AM, Mike Kerner <[hidden email]>
wrote:

> It has to be visible, which is a problem on ios, at least.
>
> On Thu, Sep 21, 2017 at 11:20 AM, Bob Sneidar via use-livecode <
> [hidden email]> wrote:
>
>> That used to be a scroll bar. Of course mobile devices do not have those,
>> they have wheels. Perhaps using a scrolling wheel is a better choice for
>> lists.
>>
>> Bob S
>>
>>
>> > On Sep 21, 2017, at 08:14 , Mike Kerner via use-livecode <
>> [hidden email]> wrote:
>> >
>> > I agree with J.  The simplest visual cue that there is something in the
>> box
>> > is for the lid to be ajar.  Cabinets with the door ajar begged to be
>> open.
>> > Doors that are mostly but not completely closed are the same way.  Lists
>> > should carry the same cue.
>>
>>
>> _______________________________________________
>> 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."
>



--
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: Scrolling Groups on Mobile - Show a little of what is below

Tom Glod via use-livecode
In reply to this post by Tom Glod via use-livecode
On 9/20/17 11:36 PM, Sannyasin Brahmanathaswami via use-livecode wrote:
> the proper way to do it is, says Jacque: create the rows so the bottom one is a bit cut off, otherwise a subset of users never try to scroll up!

I'm not sure how proper it is, but it's what I do and it seems to work.
I hadn't thought of the idea of flashing the scrollbar indicator, that
may work as well though it would depend on how observant the user is and
whether they understand what it means.

--
Jacqueline Landman Gay         |     [hidden email]
HyperActive Software           |     http://www.hyperactivesw.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: Scrolling Groups on Mobile - Show a little of what is below

Tom Glod via use-livecode
In reply to this post by Tom Glod via use-livecode
Yes… that's my plan… all I have to do is shrink the rows by 15 pixels vertically and the 4th one will pull up at the bottom of the screen. A bit tedious, but can do this with some toolbox scripts… so , not too hard.  Actually now that I have 24 objects = 3 each for 8 rows (each one has a bkgrnd grc, text label and small photo, kinda like the news articles toc style) instead of   8 groups with 3 child objects each… it's simpler to deal with… only thing being you can't code against a subgroup.

I'm trying to fix as much of the "bloopers" as I can because we are doing zero promotion until the android bug is fixed, just confirmed yesterday by HQ… Accelerated rendering, again, is a problem on Android.

So, though the initial app was accepted on iOS I'm treating it like a "beta test"

We also made some other bad decisions about navigation, leaving users with "where am I?" in some contexts.. which are easily fixed… which also leads to:

those  SVG icon widgets do not respond to touch unless the finger is exactly on the visible pixels…a big "house" or "journal" icon works.. but slim forward back arrows… not so much… users think the app is unresponsive, but it's just their finger didn’t "hit it exactly" so they keep punching at the icon  (like a right arrow, or back arrow) until they do… nuisance.

So where we use them for navigation I have to create a small group with a background graphic with a blend level of 99 or so and put the script into the group.  I guess this would be expected since the non-drawn areas of a SVG rect are be default transparent but we I see this everywhere: Spotify uses some really small icons, but I deliberately tapped just to the side of them and they still fire… so I guess the SOP is to increase the response region rect for any navigation where you don't need that area to do anything else… may as well give the user a lot of touch responsive area… Would be super if we could build this into the widget.. so you could, e.g set the width to 100 pixels height to 20 align the SVG to the left, center or right but the whole 100X20 region would be reactive, even if the SVG only occupied 20 X 20.  Is that worth an enhancement request?

BR

Kerner wrote:

    I agree with J.  The simplest visual cue that there is something in the box
    is for the lid to be ajar.  Cabinets with the door ajar begged to be open.
    Doors that are mostly but not completely closed are the same way.  Lists
    should carry the same cue.

_______________________________________________
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: Scrolling Groups on Mobile - Show a little of what is below

Tom Glod via use-livecode
On 9/21/17 12:57 PM, Sannyasin Brahmanathaswami via use-livecode wrote:

> Would be super if we could build this into the widget.. so you could, e.g set the width to 100 pixels height to 20 align the SVG to the left, center or right but the whole 100X20 region would be reactive, even if the SVG only occupied 20 X 20.  Is that worth an enhancement request?

Yes, definitely. I think the widget only needs to allow us to set margins.


--
Jacqueline Landman Gay         |     [hidden email]
HyperActive Software           |     http://www.hyperactivesw.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: Scrolling Groups on Mobile - Show a little of what is below

Tom Glod via use-livecode
In reply to this post by Tom Glod via use-livecode
Some mobile UI’s, when first showing a scrolling list that extends below the visible area, will slightly “bounce” the list contents up then back down.  This does double duty. It briefly reveals the hidden content and indicates that the list is scrollable. And it works regardless of screen height.

Jim Lambert
_______________________________________________
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: Scrolling Groups on Mobile - Show a little of what is below

Tom Glod via use-livecode
I've seen that also, though it looks cool initially, I'm not sure a regular user of the app would want to have that "noise" every time they go to that screen it it were a "home" screen. But it's  a good option for some use cases, for sure.

But following on Jacque's essay on user testing and "ruthless refactoring based on feedback"  and another thing I saw on Quora about how one attribute of genius is the humility and courage to throw away even a mountain of previous work if you can make the end result better…

I may just try to get stackholders to let us put links to all 8 regions on the visible region and scrap the scroller. Our new designer in Croatia created that exact screen for me (without my asking her to) in Invision...  and younger users who I have given a "no holds bar feedback license" are pretty vocal about it… "It's only 8 links… why do you make us scroll?" Older users like it though… "I love the pretty little photos."  There one in each row. Many usesr don’t' seem to care, they are focus on content and swiping up is just natural…

UX … so many options and opinions.

    Jim Lambert wrote:

    Some mobile UI’s, when first showing a scrolling list that extends below the visible area, will slightly “bounce” the list contents up then back down.  This does double duty. It briefly reveals the hidden content and indicates that the list is scrollable. And it works regardless of screen height.
   

_______________________________________________
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: Scrolling Groups on Mobile - Show a little of what is below

Tom Glod via use-livecode
In reply to this post by Tom Glod via use-livecode
done

http://quality.livecode.com/show_bug.cgi?id=20445

please add as you think useful.

 
On 9/21/17, 11:51 AM, "use-livecode on behalf of J. Landman Gay via use-livecode" <[hidden email] on behalf of [hidden email]> wrote:

    >Would be super if we could build this into the widget.. so you could, e.g set the width to 100 pixels height to 20 align the SVG to the left, center or right but the whole 100X20 region would be reactive, even if the SVG only occupied 20 X 20.  Is that worth an enhancement request?
   
    Yes, definitely. I think the widget only needs to allow us to set margins.

_______________________________________________
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: Scrolling Groups on Mobile - Show a little of what is below

Tom Glod via use-livecode
In reply to this post by Tom Glod via use-livecode
Not sure if that is an attibute of genius, but if it is, there are precious few of us in the world. ;-)

Bob S


> On Sep 21, 2017, at 20:13 , Sannyasin Brahmanathaswami via use-livecode <[hidden email]> wrote:
>
> But following on Jacque's essay on user testing and "ruthless refactoring based on feedback"  and another thing I saw on Quora about how one attribute of genius is the humility and courage to throw away even a mountain of previous work if you can make the end result better…

_______________________________________________
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