Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

When creating tutorials (video or otherwise) for a responsive web app, what size should I show the interface at? Mobile? Desktop? Should they be separate videos?

share|improve this question
    
What exactly are you covering in the videos? The content or the layout or the interactions? –  rk. Aug 23 '13 at 1:46
    
@rk. — Possibly both, but mostly focusing on the interactions. An example could be "How to add your first entry". –  DesignerGuy Aug 23 '13 at 7:13
    
@DesignerGuy What do you mean by the tag "onboarding"? –  kontur Sep 29 '13 at 12:44
add comment

3 Answers

The video/tutorial content should be specific to user's context. So for a smartphone breakpoint, the tutorial should reflect the smartphone interface and so on.

The idea of help/tutorial is to give answers to the user and if the user has to translate it from one breakpoint to another, it put much more cognitive load on them.

share|improve this answer
add comment

I do not know what you want to do however, you should focus on the scenario of what you want to show. I think that the video should be divided by actions rather than screen sizes.

  • In which actions do you think that the user wants to use mobile screen view?
  • In which actions do you think that the user wants to use desktop view?

After designing your video scenario, the tool choice is another topic that will have effect on the quality. In my own experience, I used Camstudio (a free tool) and you need to be careful about codec choices. Some of the codecs are decreasing the quality while you are editing the video.

I recorded the same flow twice because of a bad quality (codec problems). Lagarith is one of the best codec that you can find for screen recording purposes.

If you are filling any text or text-box interaction, you should zoom on action (a little bit) from your browser since the screen recording depends on your screen resolution. When you want to zoom into these actions while editing (especially with adobe tools), having a pixelated view will not increase the overall experience.

For mobile recording, you should clear about what kind of actions does user take? Touch, slide and its direction.

Good luck with your video tutorial.

share|improve this answer
add comment

You should definitely show both mobile and desktop (and possibly a third, medium size for smaller tablets like the IPad Miniand Kindle Fire). Your Desktop interface should be at least wide enough to accommodate the smallest screen size currently in use (generally accepted to be 1024px) but to achieve maximum effectiveness, should be wider to show right and left margins and negative space. With Responsive frameworks such as Zurb's Foundation and Twitter's Bootstrap, the smaller screen widths can be simulated by resizing your browser down past the media-query breakpoints set in your css, so there is no need to do separate videos.

share|improve this answer
    
Doesn't zurb foundation provide a test-drive style javascript plugin to get around the need for a video? –  Racheet Sep 24 '13 at 15:32
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.