Mobile Viewer Sketches

9 posts in this set, shared with 4 people
  • Title Page

    The title screen is clean and full width to avoid clutter and focus the user on what they're about to view.

    3 / 3 2 1

    Avatar
    2 comments on the overall post.
    1. Avatar

      I think overall this is a great viewing experience, I only worry if by hiding the feedback methods we'll be cutting down on people giving it.Jonathan Smiley

    2. Avatar

      But are we really hiding it? Or just following a common mobile convention of putting things behind buttons? I'd argue that people would recognize a menu button and a thumbs button as ways to take action or find something.Chris Michel

    3. Avatar

    1. 1
      Avatar

      Progress to first slide. Chris Michel, over 5 years

      • Avatar
  • Preso

    Viewing a preso will be awesome on a mobile device because the menu gives users access to everything they need and stays out of the way of the actual slide.

    3 / 3 3 3

    Avatar
    1. 1
      Avatar

      Bar is positioned static so it scrolls like you'd expect and is always on top of the screenshot. Chris Michel, over 5 years

      • Avatar

        Just a note: this is easy on iPhone, pain in the ass on Android. Jonathan Smiley, over 5 years

      • Avatar

        Not fixed, static. It scrolls with the page like normal Chris Michel, over 5 years

      • Avatar

        Derp. I cannot read. Jonathan Smiley, over 5 years

      • Avatar
    2. 2
      Avatar

      Access the rating overlay menu Chris Michel, over 5 years

      • Avatar
    3. 3
      Avatar

      Access the menu. Chris Michel, over 5 years

      • Avatar
  • Fluid Swipe Transition

    The swipe transition should be smooth and feel quick to perform.

    3 / 3 1

    Avatar
    1. 1
      Avatar

      If the bar is in the viewport, it says as the image scrolls below it. Chris Michel, over 5 years

      • Avatar
  • Menu

    The menu gives us a pattern that is easily repeatable and gives users everything they need to interact with the preso.

    3 / 3 6

    Avatar
    1. 1
      Avatar

      Title, slide number and description for current slide. Chris Michel, over 5 years

      • Avatar
    2. 2
      Avatar

      If the slide has more than one version, we'll mark it here. Chris Michel, over 5 years

      • Avatar
    3. 3
      Avatar

      Goes to final comment page. Chris Michel, over 5 years

      • Avatar
    4. 4
      Avatar

      Goes to version switcher page Chris Michel, over 5 years

      • Avatar
    5. 5
      Avatar

      Access the raiting overlay Chris Michel, over 5 years

      • Avatar
    6. 6
      Avatar

      Share by adding emails like we already do, but simplified. Chris Michel, over 5 years

      • Avatar
  • Switch Version

    Switching version on a mobile device is really easy, it only takes a couple clicks.

    3 / 3 4 2

    Avatar
    1. 1
      Avatar

      Mark the current version Chris Michel, over 5 years

      • Avatar

        If we're marking the current version then we should also be doing this in the desktop viewer as well. Mark Hayes, over 5 years

      • Avatar

        We do mark the current version in the version dropdown don't we? Chris Michel, over 5 years

      • Avatar

        Yes, currently we're marking the newest version as the current version. I was thinking that we were "marking" the version we wanted to display as the current version. Please disregard this comment :) Mark Hayes, over 5 years

      • Avatar
    2. 2
      Avatar

      We can't upload new versions from the mobile viewer, so let's X this. Mark Hayes, over 5 years

      • Avatar

        yes, meant to get rid of that before uploading :) Chris Michel, over 5 years

      • Avatar
  • Rating

    When a user clicks the rating button, we'll overlay the two option above the screenshot and make it obvious what they need to do.

    3 / 3 2 1

    Avatar
    2 comments on the overall post.
    1. Avatar

      How much do we want people doing thumbs up / thumbs down? I would think if we want people giving feedback these needs to be exposed, maybe right under the image?Jonathan Smiley

    2. Avatar

      Since it's a feature you explicitly enable, we very much want them to do it.Matt Kelly

    3. Avatar

    1. 1
      Avatar

      Whats the active state? Chris Michel, over 5 years

      • Avatar
  • Comment After Rating

    Once a rating is left, we'll thank them and ask them to tell us why if that was set as an option for this preso.

    3 / 3

    Avatar
  • Leave Annotation

    We can follow the annotation modal in Chop and have users tap and hold (or even double tap) to leave a pip on the page and attach a comment.

    3 / 3 1

    Avatar
    1. 1
      Avatar

      Instead of box, have it be a circle tap area. Chris Michel, over 5 years

      • Avatar
  • Final Comments

    The final comment screen has the same simple feel as the title screen to help shift the mind frame of the user once again.

    3 / 3 1

    Avatar
    1. 1
      Avatar

      Looks like "Thanks mom!" Jonathan Smiley, over 5 years

      • Avatar
Created by Chris Michel

We sketched up some initial thoughts on mobile interactions for the Influence preso viewer.

Drag here to remove post
Saving...

Drop one image to create a new post.

Drop several images to create a new set.

Drop images to add new posts.

Drop an image to add a new version to this post.

You need to publish or delete your new version before adding another.

Please wait for the current upload to finish.

Uploading version...