As an example we can think about the vending machine area on the second floor of SEL near the CS department's computer labs.
As the user approaches this area (note there are machines on 3 sides), the vending machines would communicate with the user's tablet and update their current list of available items and prices.
- The user will be able to browse the available items and get
additional information on a particular item including an image
of the item, the price of the item, the ingredients, and
nutritional information about that item.
- The user should be able to browse categories of items (coffee, chips, gum, etc) to see what is available in that category if they don't know exactly what they want.
- The items should be independent of the machines they are
sold from - i.e. your application should give the user an
aggregate view of what is in the machines in a given area, not
a per-machine view.
- Once the user finds what he/she wants he/she should be able to buy it and have it appear in the vending machine's dispenser, so the app will need some way to store and update simulated credit card information.
- When the user buys an item the app should direct them to the correct machine, since multiple machines may have the same item.
- The app should remember the user's favorite things to make
it easy to buy another of those quickly. This may also depend
on the time of year.
- The user should keep track of important personal preferences
like ingredients the user is allergic to and must avoid
(peanuts, milk, etc) and things they would prefer to avoid
(gluten, etc) and then give a warning if the user is going to
buy something dangerous or inappropriate.
- There should be a button to complain if you don't get what you asked for.
- Your interface should also support multiple languages. It should allow the user to choose from at least 10 languages, but you only need to implement English and one other language. That second language could be a real language but Swedish chef or Klingon are acceptable as the second language, and there are automatic translators for those available on line.
- Your app should also support multiple currencies since we may have some people from out of town visiting the university and they would like to know what the price is in a currency they are familiar with.
- Your application should have some information on who made it
and will very likely want to include some instructions.
To make things realistic, your application should be able to handle all of the different items in the 2nd floor SEL vending machines, but you only need to give full details (photo, price, nutritional information) on 20 of them, with all the various categories of items represented. The others should be named but could have placeholder images, prices, ingredients, and nutritional information. You may want to break up the work of finding all this information across the class and use the piazza pages to distribute it.
Your project should be able to run in the qml viewer application on windows / mac / linux. It does not need to run on an actual pad, but the interface should support the kind of interaction you would expect on a pad. It does not need to connect to an external database with information on the various food items, it could read that information from a local file, but if you implement an external web/cloud-based database it would be a bonus.
Implementing Project 1
You should start by taking a look at what is available in the vending machines by the CS computer labs (eg coffee, pop, munchies, etc.) and very likely taking some photos of the available products and prices so you can simulate them later, and then start drawing some sketches for how to lay out that information given the screen size and resolution.
For this assignment everyone will use QML (qt.nokia.com/qtquick/) so there is a common platform. Take a look at the QML examples for some ideas on the kinds of layouts and interactions that it was designed to develop.
We will assume a display size of 7.75 inches x 5.75 inches at 1024 x 768 pixels (ie roughly iPad specs) and you should use landscape orientation by default for your interface.
Each person will work individually on this project. This project is NOT a team project.
It is expected that all of the code used in these
programs will be written by you. You can use code from the web
as examples and a guide to writing your code, but the code you
turn in for the project must be your own.
Any code, images, icons, or other elements borrowed
from others must be fully cited in your application
itself, in the README file along with your source code, and on
your webpages
If you
implement all of the functionality above with a serviceable
user interface then you get a C. The B and A grades depend on
the quality of the user interface that you create.
Turning in Project 1
You should create a set of public
(available to anyone) web pages that describe your work on the
project. This should include:
- 1 page containing a link to a gzipped file containing the well-commented source code and all other necessary files to make your application run locally. This page should include instructions on how to install and run your app starting from "I have a web browser on my computer." You should provide links and clear instructions on everything needed to get your application running.
- 1 page on how to use your application and the things you can do with it.
- 1 page on why you think you have cteated a good interface.
all of which should have plenty of
screenshots with meaningful captions. Web pages like this can be
very helpful later on in helping you build up a portfolio of
your work when you start looking for a job so please put some
effort into it.
You should also create a 2-3 minute YouTube video showing the
use of your application including narration with decent audio
quality. That video should be in a very obvious place on your
main project web page. The easiest way to do this is to use a
screen-capture tool while interacting with the application,
though you will most likely find its useful to do some editing
afterwards to tighten the video up. Its also a good idea to have
a video like this available as a backup during your presentation
just in case of gremlins.
The web page including screen snapshots and video need to be
done by the deadline so be sure to leave enough time to get that
work done. Once you have your webpage done, send the URL to the
TA before the deadline.
I will be linking your web page to the course notes so please
send me a nice representative 1024 x 768 jpg image of your
application for the web. This should be named
p1.<your_last_name>.<your_first_name>.jpg.
Presenting Project 1
An important part of creating user interfaces is getting feedback and using it to improve your design. Given the class size, this can be a bit of a challenge. On 2/7 and 2/9, after the project has been turned in, we will have some group discussions and presentations about the solutions to Project 1.
On Tuesday 2/7 the class will break into groups. Each group will compare notes on their solutions to the problem and come to an agreement on a single revised interface design, so bring printed screenshots of your design to this class meeting (the web pages you created to turn in the assignment should be able to do double-duty here.) This revised design does not have to be implemented; it should be presented as a series of screen snapshots/mockups for the major functions.
Before Thursday's class on 2/9 each group should create a web page with the team members' names, the screen snapshots for the revised design, and a description of how the revised interface will be used. The address of this page should be emailed to the TA before class begins on Thursday.
On Thursday 2/9 each of the groups
will give a presentation on the revised interface that
their group came up with, using their web page, showing the
snapshots and giving a brief description of its functionality.
The length of the presentation will be determined once we know
the number of groups, but most likely around 5 minutes.
Very likely later on in the term
the class will break into different groups and revise the
revised designs again.
Here are the designs that were turned in on 2/6/12
 |
 |
|
 |
|
 |
 |
 |
|
|
 |
 |
 |
 |
 |
|
 |
|
 |
||
| |
||
Here are the websites showing the group work done in class on 2/7 to compare their current designs and create an improved design.
Here are the websites showing the group work done in class with new groupings to compare their current designs and create an improved design.