DDQ MON 2020-10-19 @ 12:40 PM

23. Design Practicum: Wireframes

23.1. Agenda

1. General Announcements

2. Next CSCI 4800H/6800 Paper Presentation is on THU 2020-10-22.

   • N.W. will present Purington et al. “Alexa is My New BFF”: Social Roles, User Satisfaction, and Personification of the Amazon Echo.” In Proceedings of the 2017 CHI Conference Extended Abstracts on Human Factors in Computing Systems. May 2017. [2020FA:2]

3. Term Project: Milestone 3 details coming soon.

4. Activity

23.2. Activity

Prerequisites:

• Some of the material for this activity was covered in Preliminary and Detailed Design.

• You need Adobe XD installed.

---

Fig. 23.1 The Iterative Cycle of Human-Centered Design [Book:2].

---

ideation

idea generation

In human-centered design, a brainstorming component of the preliminary design phase that is focused on generating potential solutions [Book:2]. The following rules should be followed during ideation.

• Generate numerous ideas.

• Be creative without regard to constraints.

• Question everything, especially the status quo.

status quo

The existing state of affairs, especially regarding social or political issues. In design, this includes common, existing design solutions that address your requirement or a similar requirement.

stupid question

A questions that asks about things so fundamental that everyone assumes the answer is obvious [Book:2].

I am particularly fond of stupid questions. […] [W]hen the question is taken is seriously, it often turns out to be profound: the obvious often is not obvious at all. What we assume to be obvious is simply the way things have always been done, but now that it is quetioned, we don’t actually know the reasons.

—Don Norman, The Design of Everyday Things [Book:2]

23.2.1. Breakout Rooms

Duration: \(\sim\) 20-25 minutes

1. Quick introductions, if needed.

2. As a group, respond to the following in a followup discussion here.

   1. At least one person in the group needs to have Adobe XD installed. On the pricing page for Adobe XD, a free Starter edition is available.

   2. Pick an app that everyone in the group has used and pretend to be the designers of that app. Provide the name of the app, and, If possible, provide a screenshot.

   3. Drawing on your experience from a prior DDQ (Requirements Analysis), describe a relatively simple requirement using a user story.

   4. Ideation: Using Adobe XD, create at least two wireframes that each represent a potential design solution (idea) for your requirement. Each wireframe must include at least three artboards (i.e., pages or screens). Once completed, export your artboards to PNG, then share each idea by adding them to your Piazza post in an organized manner with with short descriptions.

      See also

      • Set up (Adobe XD) artboards in 4 easy steps

      • Website & App Wireframe Examples For Creating a Solid UX Design

      • Common Wireframing Issues to Avoid

      Warning

      Remember, wireframes are intended to be low-fidelity so that its easier to hash out different potential solutions during ideation. Try not to focus on things that are more appropriate for mockups or prototypes. It’s always possible to add more detail later.

   5. What was the biggest challenge faced by your group during this activity?

   6. Make sure all group / room members are listed in your followup discussion post.

3. Pick a group representative.

4. Respond to other followup discussions until the breakout rooms end.

23.2.2. Post-Breakout Rooms

Before 5PM today, comment on a design posted by another group by replying to their followup discussion.

23.3. References