Review

This just contains the introductory material from Studio 3. If you didn't have a chance to review all the resources on User Stories, Usage Scenarios, and Paper Prototypes during studio, take a look at them.

Introduction

We'll be using three different web technologies for the user interfaces for our IoT products:

HTML: For Content and Structure
CSS: For the styling (look and feel)
Javascript: For the behavior.

We'll start with traditional web pages and later in the semester use these same tools to create mobile apps using Apache Cordova (and PhoneGap).

The goal today is to practice some basic HTML and UI design. For those who have taken either CSE104 (Web Development) or CSE330 (Rapid Prototype Development) the HTML & CSS will be a review.

The Application

The goal is to create a user interface for a web-enabled light. We'll do a quick demo of an app-enabled light to review some of the potential features and see one possible user interface.

User Stories & Usage Scenarios

Every system has “requirements” — the things the software needs to do to fulfill its purpose. Developing, understanding, and revising these requirements is a complex part of software engineering and beyond the scope of this class, but we will use simplified versions of common software engineering techniques to help us informally identify requirements.

User Stories are a common way to identify requirements in a very concrete way. Often user stories are developed by the “customer” (the person who wants or will eventually use the software). The goal is to identify requirements and then use these stories to guide a variety of other decisions (estimates of time/resources needed, prioritizing features, guiding protocol and UI designs, etc.). Often the majority of user stories are created before any development work commences.

Read through the first three sections of Agile Modeling’s article “User Stories: An Agile Introduction” to get a better idea of what a typical user story looks like. Also take a look at the examples of Usage Scenarios in "Usage Scenarios: An Agile Introduction".

User Experience / Paper Prototyping

The concept of User Experience is important in software, but is especially important in Apps and consumer-oriented IoT products. A well-thought-out user interface (UI) is one of the keys to a good user experience. We’ll use “paper prototypes” to plan out some of the user interface that will eventually be implemented in web pages and apps. Review these short introductions to Paper Prototypes:

And here are some videos showing paper prototypes being used with a user story: 10 Effective Video Examples of Paper Prototyping