InteractiveMechanics / nmai-nk360-interactives

0 stars 0 forks source link

[x] Instruction screen/experience inconsistency #677

Closed amberreeves closed 6 years ago

amberreeves commented 6 years ago

i'm putting the entire client comment here just for reference, but what this is getting at is the instruction screen and the full timeline experience aren't exactly in sync. the Explore in Detail section of the instruction screen shows a person swiping through the timeline, but the timeline actually requires the user to tap through the arrows.

...

While using a mobile device in both landscape & portrait mode, Exploring the Timeline portion of the activity is inconvenient due to the Built in Navigation of the page. While the instructions show a tap and drag, or Click and drag for the Timeline the actual navigation forces the user to tap 1 of 2 circled arrows at the far left or right of the device to navigate timeline sections. Current users of Smart-Devices are used to a Tap-and-Drag style of navigation within mobile web browsers. Converting from a Tap-and-Drag navigation to a “tap/click the arrows” navigation when instructions show and users are used to the former can make users feel mislead, disoriented, and confused.

Platform: Android, iOS

Model: Samsung Galaxy S8, Samsung Galaxy Tab S 10.5, iPhone 7+, iPad Pro 12.9

OS: Android (S8) - 7.0, Android (Tab S 10.5) - 6.0.1, iOS (iPhone 7+) - 11.0.1, iOS (iPad Pro 12.9) - 10.3.3

Browser: Mobile Chrome (55.0.2883.91), Mobile Firefox (57.0), Mobile Safari

To recreate: 1 Observe “explore in detail” diagram. Note that it appears as a Tap-and-Drag indicator 2 Tap/click continue activity 3 Attempt to Tap-and-Drag the timeline. Note that it does not move. 4 Tap /click the navigation icons on either side of the timeline activity. Note that the timeline now moves between pre-determined sections.

cahdeemer commented 6 years ago

so is this a duplicate of #674?

amberreeves commented 6 years ago

yes, i'm just seeing now, after the fact, that the timeline doesn't swipe on desktop or mobile. closing #674 now. thanks.

cahdeemer commented 6 years ago

@amberreeves, would you mind please clarifying the issues here:

1) change the image and text for the "Complete the Timeline" section so that they match the sortable layout that exists on mobile.

2) on mobile, remove the left/right arrows from the full timeline screen, replacing with swipe interactions

amberreeves commented 6 years ago

i think if we just change the instructions graphic/text - on desktop, it shows clicking through the arrows instead of swiping and on mobile it shows the sorting action instead of swiping, that works. if that doesn't work, can you provide an option for aligning everything that is the path of least resistance?

mtedeschi commented 6 years ago

For instruction #1, we'll keep all functionality the same and create a new mobile specific graphic (and text) for how "Complete the Timeline" behaves.

For instruction #2, we'll leave the desktop functionality the same, and remove arrows from mobile and add in the swipe to navigate. We'll change the graphic for the desktop version to reflect navigating with arrows only.