Instructions

User Manual: Pdf

Open the PDF directly: View PDF .
Page Count: 2

Download
Open PDF In Browser	View PDF

CS 3053
Project – Sketches & Wireframe
Due Tuesday 2018.02.06 at the beginning of class.
Overview
In this assignment you will gain experience with physical design and apply it to prototype the
main window of your collection browser. In class, we had a group exercise to sketch potential
designs and assess their suitability for ongoing consideration. Out of class, you will use what
you learned in a second round of physical design. Individually, you will create a new sketch,
then implement the sketch as a simple wireframe. As a group, you will analyze and compare
your team’s wireframes, choose one as your main candidate, refine it, and draw conclusions
about how it factors into the design of your collection browser moving forward.
The individual tasks in this assignment are likely to take much more time and effort than in the
previous assignment. You must complete all individual tasks before proceeding to group tasks.
Be sure to leave enough time for your team to complete the group tasks!
Individual Tasks
All individual tasks must be completed entirely on your own.

#1: Sketch, on paper or in a drawing tool, a design for the main window of the application.
Choose and layout an appropriate set of user interface components in your sketch. Feel free to
take into account the different approaches and styles that people used in the sketches in class.
Don’t simply copy from the sketches! We’ll be looking for clear evidence of both creativity and
refinement in your overall design and in the details. The sketches from the class exercise are in
Files/Other/magnet-sketches.pdf for you to study and refer to in your group analysis as desired.
Aim for relative simplicity at this point. Focus on the hierarchy of panels and the basic widgets in
it. For now don’t include a menubar, toolbars/ribbons, tabs, or adjustable panes; you’ll get to
incorporate them in later assignments. However, combo boxes and popup menus as widgets
inside of panels are fine. Include appropriate borders and labels as needed to visually group
sets of related panels/widgets. Images, icons, and decorative graphics may be either actually
drawn to suggest real appearance or simply represented using X’ed rectangles as placeholders.
#2: Implement your sketch as a wireframe. Start by copying BuildTest.java into a new file
called Stage1.java. Uncomment the createScript() line for stage1 in build.gradle.
Whenever you build, an executable called stage1 will appear in build/install/base/bin.
Read How to Make Frames (linked from the JFrame Javadoc API) to learn about setting up a
simple frame. In Stage1.java, create a JFrame, add your root JPanel to the frame’s content
pane, then pack and display the frame. Set the program to exit when the frame closes. The
code that you copied into Stage1.java already does these basic things. You may reuse and
adapt this code but all other code written for this assignment must be entirely your own,
written by hand (no UI builder auto-generated code), using only the stock Java JDK API.
Add code to Stage1.java to define the user interface components of your sketched design
and organize them into a layout hierarchy of components. Use JPanel and the subclasses of
JComponent in Swing and LayoutManager in the AWT to do this. You may judiciously create
new classes and even packages; if you do, organize them inside the edu.ou.cs.hci.stages
package. Document your code thoroughly and appropriately.

The TAs and I will be available during our respective office hours if you need help learning and/
or remembering how to use Java and the Swing library of classes. The Booster Session that I
hold every Friday from 1:30–2:30pm in 226 DEH is an especially good time to get practical help.
#3: Demonstrate that you’ve succeeded at the above tasks. Turn your sketch into a PDF and
put it in the Results subdirectory as stage1-sketch.pdf. (If your sketch is on paper, scan it
or take a reasonably high quality photo of it first.) Take a screenshot of your wireframe, trim it,
turn it into a PDF, and put it in the Results subdirectory as stage1-screenshot.pdf.
To turn in your individual work, run gradle clean to reduce the size of your build. Zip your
entire project directory. Submit your zip file to the “Individual - Sketches & Wireframes”
assignment in Canvas.
Group Tasks
Complete all individual tasks before proceeding to group tasks.

#4: Discuss your individual sketches and wireframes. For each wireframe, assess its usability in
terms of how well it follows the ten principles we covered in class. Predict which design choice
is likely to most negatively affect its overall usability, and why.
#5: Based on your predictions about each wireframe, decide which features to adopt from each
one. Integrate the corresponding code from your individual wireframes into a new build. This will
be the build that you all start from in the next project assignment.
It is acceptable for your integrated build to consist mostly or even entirely of one of your
individual wireframes.
#6: Document your group’s discussion and decisions. Write this together. Summarize your
assessment of usability for each wireframe, including your prediction and main reasons for your
prediction about each one. Briefly lay out your rationale for choosing the combination of features
that you did for your integrated build. Focus on the main usability advantages you hope to gain
and disadvantages you hope to avoid. Between 1.0 and 1.5 pages should be enough. Use
regular paragraphs and standard formatting (12 point font, 1 inch margins, etc.) Please include
a header (not too many lines) on the first page with your team number, name/logo, and list of
member names.
If your integrated build derives mostly or entirely from one individual wireframe, include a much
more detailed argument for its usability relative to the others. Add about 0.5 pages for this. (This
increased writing requirement is meant to compensate for decreased coding effort.)
To turn in your group work, go to the “Group - Sketches & Wireframes” assignment in Canvas
to submit your results as a PDF. Only one team member needs to turn in the group component.



---

Source Exif Data:

File Type                       : PDF
File Type Extension             : pdf
MIME Type                       : application/pdf
PDF Version                     : 1.3
Linearized                      : No
Page Count                      : 2
Title                           : Instructions
Producer                        : Mac OS X 10.12.6 Quartz PDFContext
Creator                         : Pages
Create Date                     : 2018:01:31 03:19:12Z
Modify Date                     : 2018:01:31 03:19:12Z

EXIF Metadata provided by EXIF.tools