Category Archives: I2ID

DAAT 111 Intro to Interface Design

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,

I2ID 03: The OS as the UI + Video Games 02/06/20

HCI Instruments
Windows
Early Monitors
From these “lines”not much different
Herman and his really Amazing counter
The eventual company
To a long long line of GUIs.
Alto OS
Mac 1984
Atari ST (’85), Amiga Work Bench (’85), DeskMate (’84)
DEMO
Today?
Remember these?
What Happened?
Not what MS intended…
Sometimes UI is not fair

Gaming
Bertie and Nim
Tennis for 2
Nerd Alert!
AI Students
DEC
Stevie R
Inspiration comes in many forms
The Game!
Video Game Industry Pioneer
Computer Space for the masses
His company and that name
First is not always best
Much better!
Birth of an industry

BREAK

The evolution of Video games includes the evolution of their respective UI.UI Design is an underrated part of game development and can make or break a game if not handled correctly. For the afternoon section, do the following:

1. Do some research and choose a game you are familiar with that is old enough to have gone through a number of UI and gameplay modifications.
Example: DK

2. Choose a game, that you have played a good amount of time.

3. Research and document the changes made (UI, controllers, gameplay, etc). EXECUTION

4. What was the end result (EVALUATION)? Did it improve or degrade the overall game experience?

Be ready to present your findings.

Some resources.

I2ID 02: Theory & HCI History 01/30/20

READ: A theory of user interfaces.
Signifier?
Old UI
Birth of digital computing
Babbage
Diff Eng
Ancient calculator
Input/Output
Why a DE? And?
Countess
Jacquard and results
First Computer, that never was…
Zuse
MK 1
I need the range
One type of “Computer”
ENIAC
Programming Interface
Output
Getting there?
Mouse
The Mother of all demos
Dynabook
XEROX Alto
Nerd zine
Altair 8800
What is OS?
Software Interface
Sol, Commodore, Apple II
What is Application?
IBM PC
Tyrany of DOS
XEROX Alto
MAC
Windows 1

BREAK
Heading into the PC era

ASSIGNMENT: Read ““As We May Think”. Imagine that you are a young person interested in technology and electronics in 1945 and you read this article. How would you imagine interface design in the future? Answer creatively.

I2ID 01: Intro 01/22/2020

Review Syllabus
Ancient UI? Tools
Something much closer to home?
Book UX v.1.0
Better Usability
How many?
Best UI?
UI that Worked and still does?
Passed down
Phones are smart.
Interact
Keyboard
Intuitive or outdated?
Mouse
What is next?
AR/VR
History
Culture

BREAK
In class:
UI is the space where interactions between humans and machines* occur. The goal of this interaction is to allow effective operation and control of the machine from the human end, whilst the machine simultaneously feeds back information that aids the operators’ decision-making process.

Take some time to find 3 examples of non-digital interfaces, and 3 examples of digital (computer – including video games) interfaces. Think about your examples from a usability perspective. Do your examples fit the definition above? Discuss and Email links to me: jparada@uarts.edu

READ: A theory of user interfaces.