Category Archives: I2ID

DAAT 111 Intro to Interface Design

I2ID 14: FINAL CLASS 04/30/20

REVIEW:
– We will start off by reviewing your progress (present work).
FINAL (Due 05/06): Hi-Fidelity Prototype with a high level of functional detail (I should be able to click anything that looks clickable). Use animation or any other technique to make the prototype come to life. Please put a link to the working prototype in your shared folder.

Deliverables:
– Final Interface Prototype (public link OR files. Test before sending!)
– Documentation (midterm)
– Place in the shared folder before the last class.
– Present next week

Last Afternoon Group Session – 2:30 PM:
Rapid Prototyping Exercise 3:
– Review Exercise #2 from last week. What would you change?
– Use: Modified 8–6–4–2 Rapid Prototype Method.
– Instead of segmented sketching minutes, followed by feedback breaks, let’s make the process more organic. 40 minutes of group ideation, design, and sketches to create a usability “story”.
– This means you should start by organizing the team — who is the sketcher, who keeps time, etc, etc.
– Focus on usability and functionality NOT design.
– Tell the story in images (storyboard, sketch + arrows, etc)

Prompt: E-Commerce Shop(Single Item) Design an e-commerce shop. You re selling Croc- Flops. Consider the brand, the products offered, product views, product options, desired actions (conversions, product views, etc.), and the users!

I2ID 13: LEAN UX + FINAL 04/13/20

REVIEW:
Pulling it all together. Design + functionality.
FINAL (Due 05/06): Hi-Fidelity Prototype with a high level of functional detail (I should be able to click anything that looks clickable) Please put a link to the working prototype in your shared folder.

– We will start off by reviewing your progress (present work).

– Include more animation. Details matter!

We will continue reviewing the finishing polish (including animation) for your final project in the afternoon session starting at 3 PM.

Rapid Prototyping Exercise 2:
– Review Exercise #1 from last week. What would you change?
– Use: Modified 8–6–4–2 Rapid Prototype Method.
– Instead of segmented sketching minutes, followed by feedback breaks, let’s make the process more organic. 30 – 40 minutes of group ideation, design, and sketches to create a usability “story”.
– This means you should start by organizing the team — who is the sketcher, who keeps time, etc, etc.

Prompt: Create a global hero status interface, for a POV or first-person game, The game is not important. You are to focus on the Hero Interface that tells the player important stats such as health, hit points, inventory, etc. FOCUS ON USABILITY!

I2ID 12: DESIGN + RAPID (LEAN UX) 04/16/20

REVIEW:
– Incorporate UI feedback into your Lo-Fi demo. Test and test again, until the final…
– Preliminary front-end design. Upload to the shared drive.
PRESENT
– Incorporate feedback
– Remember – Version control.

Pulling it all together. Design + functionality.
FINAL (Due 05/06): Hi-Fidelity Prototype (How about adding animation?) with a high level of functional detail (I should be able to click anything that looks clickable) Please put a link to the working prototype in your shared folder.

RAPID PROTOTYPING (LEAN UX):
Old School = Deliverables:
1. Research
2. Design (Documents, Images, Etc)
3. Prototype
– Lo-Fi Clickable demo (x)
– Test(x)
– Front-End Design: (x)
4. Build
– Hi-Fi Prototype

A lot of documentation, right? Yes, it has its value but the complaint was that designers were spending more of their time meeting deliverable deadlines instead of actually designing. A better, streamlined approach was needed.

Enter Lean/Agile. In UID, it has evolved into “Rapid Prototyping” or “Lean UX”.

BREAK: Read The Article. Check back in at 2 PM for the afternoon lab.
Review LEAN UX

Rapid Prototyping Exercise:
– Introduce: 8–6–4–2 Rapid Prototype Method
– The premise of this method is to sketch for 8 minutes, 6 minutes, 4 minutes and 2 minutes with quick 5-minute feedback sessions in between.

— Prompt: Create a sign-up page, form, or app screen related to signing up for something. It could be for a volunteer event, contest registration, a giveaway, or anything you can imagine. Gp through the ideation method above. After completion of the cycle, there should be 1 Rapid Prototype. FOCUS ON USABILITY!

I2ID 11: Front-End Design 04/09/20

REVIEW:
– Use the wireframes produced for your midterm and convert them into a lo-fi, clickable prototype.
– Take the time to demo each other’s work in order to have feedback for the critique.
PRESENT
– Incorporate feedback
– Version control. V.01….V1.0
Consider using a site map

Up Next:
Last chance saloon. You now have a month until you have to present a final project. Now is your chance to start on your own original idea. Think about it.
Front-end design – use your mood board. First Version. Same as before – put in Drive.

Deliverables:
1. Research (PDF)
– Who is this for (demographics)?
– What do your users want to get done?
– What are their goals?
– What are they trying to achieve?
2. Design (Documents, Images, Etc)
– User stories (2-3), identifying different users’ goals. We can use these user stories to create different scenarios. This helps us to identify clear goals. In Detail.
– Create initial user flows — written AND visual.
– Create Wireframes of the interfaces. Incorporate feedback, and solutions from your Interface Library and Pattern Library in your final version.
.: SPRING BREAK/CVD19 :.
3. Prototype
– Lo-Fi Clickable demo
– Test(x)
– Front-End Design:

4. Build
– Hi-Fi Prototype

ASSIGNMENT:
– Preliminary front-end design. Upload to the shared drive.
– Incorporate UI feedback into your Lo-Fi demo. Test and test again.

I2ID 10: PROTOTYPING and Testing 04/02/20

REVIEW:
– Use the wireframes produced for your midterm and convert them into a lo-fi, clickable prototype. Be as detailed as possible.
– Upload your prototypes to the Google Class Drive. This can be in a number of different formats BUT other students and I should be able to click through the demo. Questions?
– Take the time to demo each other’s work in order to have feedback for the critique.

Assignment above should follow your previous documentation
UX Research
– What do your users want to get done?
– What are their goals?
– What are they trying to achieve?

Ideally, you should adopt an iterative approach towards your design:
1. Research
2. Design
3. Prototype**
4. Build
5. Test
it’s critical not to get lost designing in a vacuum — isolated from users —

UP NEXT:
Design: Start with a “Mood Board”
Create a mood board that will inform the design of your final interface.

ASSIGNMENT:
1. Continue developing your prototype. Make sure your public prototype is available for other users to interact with. INTERACT with every prototype in the shared drive. Leave your feedback on each public document in the shared folder.

2. Create a preliminary mood board AND first design draft. Turn in BEFORE next class (in Shared Drive). We will review next week

I2ID 09: We Are Back! Prototyping… 03/26/20

Welcome Back!
Revised Syllabus

REVIEW:
Where we left off…
UX Research
– What do your users want to get done?
– What are their goals?
– What are they trying to achieve?

Ideally, you should adopt an iterative approach towards your design:
1. Research
2. Design
3. Prototype**
4. Build
5. Test
it’s critical not to get lost designing in a vacuum — isolated from users —

Up Next:
Prototyping: You have completed wireframes in a digital format. Now, convert to lo-fi, clickable demos.
Examples:
Companion website for a book
Medical software

Adobe XD REsources
General
Proto 1
Proto 2

Dont like XD?
More
Options
available

ASSIGNMENT:
– Use the wireframes produced for your midterm and convert them into a lo-fi, clickable prototype. Be as detailed as possible.
– Check out at 3 PM
— Any questions about prototyping?
— Turning in your work?
– Upload your prototypes to the Google Class Drive Before our next class.

I2ID 07: Midterm Due (Pt.1)… 03/05/20

REVIEW:
Midterm presentations (Part 1). We reviewed the requirements/research and stories last week. Present your first round of UI in Wireframe format, including process (sketches).

Next Steps:
Finalize UI by using an Interface Inventory and Pattern Library. Read the following article to learn what these terms mean. Link to Interface Inventory template.

For the final iteration of your wireframes, build an Interface Library and Pattern Library and apply to your wireframe

MIDTERM:
This exercise involves starting the UX/UI development process for any of the following prompts:

1. A backpacking checklist builder. People who only backpack once or twice a year may spend so much time deciding what to take, running from store to store to pick it up, and packing it, that the trip is more work than fun — and something usually gets forgotten anyway. This software would produce simple pre-trip instructions and checklists that would alleviate these problems.

2. A cooking help system for folks who don’t cook often. Many single people cook only infrequently, so they don’t have many ingredients on hand in the kitchen. When they do cook, planning, and shopping is as much a part of their effort as following the recipe. This software would help the infrequent cook maintain a kitchen with the ingredients common to many meals, and would help plan meals that could be produced (or nearly so) with what was currently on hand.

3. A system that teaches users how the stock market works by making a game out of it. The “Game” would include fake companies that you can invest in using fake funds. Fake news reports would be tied in to create market fluctuations the way a real stock market currently functions

4. A dating site/system that relies on factors OTHER than appearance. What would the “mechanics” be if images were not part of the selection process?

Deliverables:
1. Research (PDF)
– Who is this for (demographics)?
– What do your users want to get done?
– What are their goals?
– What are they trying to achieve?
2. Design (Documents, Images, Etc)
– User stories (2-3), identifying different users’ goals. We can use these user stories to create different scenarios. This helps us to identify clear goals. In Detail.
– Create initial user flows — written AND visual.
– Create Wireframes of the interfaces. Incorporate feedback, and solutions from your Interface Library and Pattern Library in your final version.

For 02/27, please have #1 and #2/User Stories ready to present in class.
For 03/05, please have most of the completed project ready to present in class. Final Deliverables are due 03/06 (End of the Day)..

I2ID 06: Midterm – final steps 02/27/20

First is a very simple fact: UI Design is the combination of Art and Design. UI Design is about applying usability or experience design to art and is a very specific skill.

UX Research
– What do your users want to get done?
– What are their goals?
– What are they trying to achieve?

Ideally, you should adopt an iterative approach towards your design:
1. Research
2. Design
3. Prototype
4. Build
5. Test
it’s critical not to get lost designing in a vacuum — isolated from users —

RESEARCH
– Qualitative and Quantitative; and
– Behavioral and Attitudinal

STORY:
Research: UXD – User Experience Design. User Scenarios, Usability maps.

CREATE:
Pencils or Pixels?
Many examples out there.
Up Next –

REVIEW:
REVISED – MIDTERM DUE 03/06/20 (EOD – No late work accepted)

I2ID 05: Process, UX + UID 02/20/20

First is a very simple fact: UI Design is the combination of Art and Design. UI Design is about applying usability or experience design to art and is a very specific skill.

Why do we need a “Process”

UX Research
Read this article…
– What do your users want to get done?
– What are their goals?
– What are they trying to achieve?

Research should be an ongoing process — it’s rarely, if ever “finished” — it’s returned to repeatedly throughout the process. Ideally, you should adopt an iterative approach towards your design:
1. Research
2. Design
3. Prototype
4. Build
5. Test
it’s critical not to get lost designing in a vacuum — isolated from users —

RESEARCH
– Qualitative and Quantitative; and
– Behavioral and Attitudinal

It’s critical to find the right kind of people, and building a screening document for candidates is one way of doing this. A screening document lists the characteristics of the users you’re designing for, for example: male or female, aged 65+, computer literate, travel regularly, and so on.
Test Script

NEXT…a bridge between the research phase and the design phase
READ this article for next week…
The software does it for you

ASSIGNMENT:
Based on the brief introduction to UI/UX Process and Research covered in today’s lecture, please do the following:
1. Select a web site (+ corresponding mobile site), PC game (NOT a console game), or Mobile App.
2. Once selected, try to “reverse engineer” the initial research component by focusing on:
– What do your users want to get done?
– What are their goals?
– What are they trying to achieve?
3. Be specific (stay away from generalizations) and proceed to create user stories or scenarios to support your conclusions.
4. Present using screenshots, and an analysis of your own user behavior.

MIDTERM DUE 03/05/20

I2ID 04: Internet and Interface 02/13/20

V. Bush
OSRD
NSF
“LICK”
Cybernetics
It’s good to share
SAGE and display
kick in the ass
ARPALaunch
1983 Machine of the Year
Early Email
BBS for you and me
Just need a modem…
The first internet experience for most
Timmy
Early Browser
1st Commercial Browser
The final UI frontier?

ASSIGNMENT:
The User is the center of all Interface design. Based on our lecture today, research and analyze one (1) of the following:
1) An older portal or web property that has been around for at least 10 years or more. How has the interface and functionality changed in that time? What was the benefit for the end-user?

2) A Browser that has been around for at least 10 years or more. How has the interface and functionality changed in that time? What was the benefit for the end-user?

3) A mobile app that has been around for at least 5 years or more. How has the interface and functionality changed in that time? What was the benefit for the end-user?

Be ready to present by 3 PM,