Monday 21.7.2014 – Idea Day

Posted on 21.07.2014 by Valeria

Room A-447 (round room in Astra building).

To do

Today we will hear your ideas, select and merge few of them and assemble 2-3 teams. Goal: by the end of the session, we will have two-three clear problem setting and a general idea for a workshop project.

Daria will introduce Edvard De Bono‘s “six hats” approach that works as an aid for brainstorming, certain type of thinking and decision making.

hats

Idea pitching: explain briefly your thoughts
Rearranging ideas, finding similarities, merging
Forming teams – try to find a good skill balance for your team
Brainstorming
Opening a team blog (Tumblr, WordPress, Blogger, Squarespace…) – 1 blog per team
Outlining problem setting in a new post

Please add a link to your blog’s address to this post.

Supportive questions

How the problem currently occurs?
What happens now, precisely?
- How?
- When?
- Why?
- In what environment/context?
Do you think other people have experienced this same thing?
- How this problem make people feel?
- How would they g0 about it?
- Is there a workaround?
If there is some sort of solution…
- what is annoying, irritating, bad… in it?
If money and technology would not be a problem, what would be an ideal solution?

Monday 21.7 – Ideas

Posted on 13.07.2014 by Valeria

Homework / Fri 18.7

Think of a general, “raw” problem(s) that you can relate to and that you would like to work on during this course.

Be ready to verbally pitch-describe it/them on Monday (1 min).

Why are we doing this?

We will discuss and frame these problems together.
Some of the problems will be selected for workshop’s team work.
Teams will create a prototype of a digital solution for the selected and refined problem.

Supporting questions

Few questions to help you to outline a problem statement/an idea. You do not need to answer all of these questions or come up with a solution yet.

How the problem currently occurs?
What happens now, precisely?
- How?
- When?
- Why?
- In what environment/context?
Do you think other people have experienced this same thing?
- How this problem make people feel?
- How would they go about it?
- Is there a workaround?
If there is some sort of solution…
- what is annoying, irritating, bad… in it?
If money and technology would not be a problem, what would be an ideal solution?

Example

“I often find myself frustrated about what to do with my car; I have no idea when to take it to repairment or where it could be done fast enough… etc.”

Welcome to TSS 2014/Experimental Interaction Design

Posted on 13.07.2014 by Valeria

Lectures

FRI 18.7.2014 Schedule

Meeting point

TSS 2014 registration desk at 10:00. We will start our workshop in the room Astra-428.

10.00
- Meeting at TSS registration desk
10.15
- Introduction
- Vladimir Tomberg’s lecture “Design for all”
11.30
- Ilya Shmorgun and Daria Tokranova present “Touch for exchange” in university’s library
Break
11:45 – 13:00
- Roger Puks shows a demo solution for getting class room information
- Valeria Gasik talks about interaction design works
- Roger discusses technological trends
- Workshop info and “homework”

NipTip team user testing session

Posted on 23.01.2014 by zahhar

An example of user-testing session conducted by NipTip team today:

Interesting findings:
0:50 – user is not sure if she should start from browsing FOOD or HOPUSE category. Probably, she would use Search instead. Or it is worth adding tips to several categories (but how to prevent mess in this case?).
1:25 – user is confused with text over picture, possible it is hard to read for several type of users.
1:40 – users do scroll! even there are no clues about hidden interaction elements below the page fold, user still checks if there is something below.
2:00 – user founds, that app usage scenario is rather practical, then recreational: she probably would not just browsing tips, but looking for solution of specific problem.
3:10 – user wants more useful information on main screen: icons, tips, subcategories, etc…

Possible questions to ask:
(a) Did you notice anything else you can do with a tip you discovered?
(b) Would you like to share a tip with friends or rate it? When would you do it?
(c) Do you have an idea what is “Favorite” button over here? Where would you looking for the tips marked as Fovorite next time?

In real life, try to ask about 5 users corresponding to your personas, before making design decisions. If you spend more then a 5 minutes with a user, consider giving something back: discount coupon, bar of chocolate, pen, fridge magnet or any other giftware you may have.

Thursday 23.1 – Wrap-up

Posted on 23.01.2014 by Valeria

The final day of the work in progress!

To-do

Conduct a usability test with your me-fi prototype
Make final corrections based on the feedback
Finish teams’ A3-poster
Update your progress in the team’s blog (if possible, also add a web-versions of your logos and posters)

Tomorrow

On Friday we will have informal presentations and demos of your teams’ projects, starting from 10.00.

You can show your blog, poster and demo. Tell in your own words what your team has being doing during the past 9 days – what was your original idea, how it evolved, what key feedback you’ve received through the usability tests, few words about your design…

After presentations we will go to TV-tower for some well-earned after course-fun! 🙂

Wednesday 22.01 — Design + Development

Posted on 23.01.2014 by DariaT

Today we started to incorporate logos, designed during Tuesday class, into final poster designs. Work on interactive me-fi prototypes is continuing as well.

Today’s presentations about handy Design Tips:

Tuesday 21.1 – Designing

Posted on 21.01.2014 by Valeria

Daria presented a process and a case study of logo design. The theme of the day was to create a suitable logo idea for the team’s project, draw couple of sketches and trace or create a logo based on these sketches in Illustrator.

Tomorrow we will finish the logos, start working with the project posters and continue with app development and testing.

“How to Design a Logo” Presentation:

Monday 20.1 – Me-Fi Prototyping

Posted on 19.01.2014 by Valeria

We will continue in the MacLab, Astra building 4th floor, room 403.

On Monday we will finish projects’ paper prototypes and move to prototyping with computers. We suggest to use Apperi.io.

For alternatives and more info, check this post.

Wireframe

A wireframe shows the hierarchy of the objects, such as headings, paragraphs, images, videos, buttons and menus as well as the main features of the app, page or service. The purpose of a wireframe is to give a quick overlook of the importance and position of various objects, and to help to assess whether or not something is missing or is out of place.

A simple low-fidelity wireframe usually lacks specific visual treatment – objects are pictured as boxes , lines and areas in white, black and shades of grey. General symbols, such as “play”, “settings” etc. can also be applied. Such approach makes the layout quite robust and easy to modify. Wireframing is an useful tool for the development process – when the structure is set, development can begin simultaneously with the user interface design and copywriting.

Example of a page and a wireframe (http://www.wirify.com/)

Medium fidelity prototype

Me-fi prototypes differ from high fidelity prototypes in their “unfinished” look. The purpose of such visualisations is to test (again) the logic of the layout, interaction and behaviour as well as the content – copy, titles, labels, menus… In case copy is not yet available, placeholder texts such as “lorem ipsum” are commonly used instead.

Developers might program simple prototypes, just to express the interaction between views. This can be done from scratch or for instance with a help of libraries like jQuery, CSS Blueprint or Bootstrap or APIs. However, all project are different so there is no standardised approach.

Graphic designers tend to use stencils and desktop design softwares such as Photoshop, Illustrator or Fireworks + UI packs. Connections between views can be done in Fireworks or images could be saved and interconnected with online applications such as InVision. Another approach is to use desktop or online application which is especially dedicated to creating mockups and prototypes, such as ProtoShare, Just in Mind and Balsamiq.