Introduction to Information and Interaction Design

Home
>
Course
>
Interaction Design
>
Introduction to Information and Interaction Design

COURSES- INFORMATION DESIGN -Introduction to Information and Interaction Design

Prof.

Soojin Jun, Hyunjung Kim

Grade

first-year student

This course provides better understanding of information and interaction design, designing of the link between a user and a product that communicates information and how a product will be used, and creating an experience for the people who will interact with it.

PROJECT 01- redesigning mobile app

1/3

redesigning Korailtalk app

Kahyun Lee Sangjun Park

DESIGN PROBLEM

Elegance and visibility, Image and Representation
• needs simplification for less distraction and clear understanding

Module and Program, Organization and Visual Structure
• lacking consistent presentation style to reinforce structure
• lacking consistent alignment

INFO STRUCTURE

Modified information structure
• we divided 할인상품/관광열차 into 할인/가족석 예매 and 영화/관광 열차, so that users can easily use those functions.

GUI DESIGN

Design Objectives
• focus on main menu and subpages used when reserving a ticket
• simplify application by eliminating all unnecessary features
• improve consistency within pages

EVALUATION

New Home Screen
• removed images inconsistent with style
• used bar layout without icons to match other pages
• removed “talk” from application name
• separated 할인상품 into 2 categories
• added PC version for convenience

승차권예매
• made blank boxes with 선택/select for clicking
• removed unnecessary icons
• added confirmation and cancel buttons (확인/조회, 취소)
• added home button

출발일시
• added calendar for convenience
• no scrolling necessary
• shows days of the week
• 확인 and 취소 buttons consistent with other pages at bottom of screen
• added home button

승차인원
• changed system to number pad
• similar layout with 승차권 예매 page
• removed unnecessary icons
• added home button
• 할인/기타 moved from bottom of screen

2/3

redesigning iPhone email app.

Heekyung Kim, Subin Chung

DESIGN PROBLEM

• Poorly organized information structure of email accounts
• Redundant grouping and repetition of functions
• Unclear visibility of icons and unnecessary bars
• Repetition of Steps

INFO STRUCTURE

Modified information structure

GUI DESIGN

Design Objective
• Reorganize the structure of the Mail Application so that all the information that the user needs is on one page
• Preserve the unique Apple IOS design structure and icons

EVALUATION

Main Page
• Three strikes: menu bar
• Search bar
• “Edit” and “reply” icon regrouped on the right corner
• Unnecessary bottom bar removed

Menu Side Bar
• Reorganized the mail inboxes and folders
• Regrouped by Mail Accounts

Thread
• Bottom bar with Instant reply window added for easier and faster response
• Layer opens up for each email so that the user can view the email on one page

3/3

redesigning EMOJI app.

Chaeyoung Kang, Bokyung Kwon

DESIGN PROBLEM

Lack of Hierarchy
• No clear distinction between upper division and sub division
• Since upper division icons are located underneath, it gives wrong sense of hierarchy

Unrelated Icon imagery
• The question mark sign seems to be representing ‘information’ or ‘FAQ’.
• Users need to read the caption printed beside to know it’s actually for purchasing additional function.

Lack of Constraint
• Font is applied to English keypad only, but no constraint exists in using Korean keypad, gives misleading information to its users
• There should be constraint on using Korean keypad if font is only available in English

Excessive Service
• Although there is already an icon for mode purchase (marked by yellow box), purchase messages are too frequent which is very inconvenient and distracting for the application users

INFO STRUCTURE

GUI DESIGN

EVALUATION

Modifications 1. Icon
• Colors: We narrowed the colors down to two so that it is simpler for the users to see.
• Meaning: Modified version looks like a speech bubble, which signifies the usage of the app

Modifications 2. Home
• Unintelligible: Unintelligible wordings like Emoji Keyboard which actually is modified to an exact wording
• Inappropriate: An icon for download which is inappropriately used is modified
• Unnecessary: Unnecessary title like ‘cool emoji fonts’ is modified to ‘fonts’ to include only the necessary meaning.

Modifications 3. Emoticon Page
• Lack of hierarchy : Modified version explicitly shows the hierarchy between icons with the upper category
• Indistinctive icons : Indistinctive icon for purchase is modified to have obvious visual sign

Modifications 5. Select Font
• Indistinctive icon for purchase: Modification made to mark the icons that need to be purchased
• Inconsistent design: the upper bar has different color to the other pages which are pink

Modifications 6. Message
• Inconsistent icon: the color of the upper bar different from other pages inconsistent icon used for sending the text
• Unnecessarily long title: modification from ‘cool emoji fonts’ to ‘message’

PROJECT 02 - table of contents design

1/4

2/4

3/4

4/4

PROJECT 03 - elevator interface design

1/3

1000 FLOOR ELEVATOR INTERFACE

SOO YOON LEE, SO HYUN PARK JAE KEUN LEE, YEOL KUK KIM

ELEVATORS

TYPES OF ELEVATORS
• MAIN ELEVATORS
• SUB ELEVATORS : EXPRESS ELEVATOR(INCLUDING THE CAFETERIA),THEMATIC ELEVATORS, CARGO ELEVATORS

BASIC ASPECTS
• SPEED: 17 MIN NONSTOP
• SIZE: 4M X 4M X 2.7M
• ACTIVITIES: WIFI ZONE, SCREEN,BACK CUSHION

MAIN ELEVATORS INTERFACE

• 30 ELEVATORS
• MOVES FROM FLOOR 0 TO 999 : ASSIGNED SPECIFIC FLOORS WHERE YOU CAN GET OFF
• DESIGNATE YOUR FLOOR BEFORE ENTERING : USING A TOUCH SCREEN PAD

MAIN ELEVATOR BUTTON INTERFACE

MAIN ELEVATOR EXTERIOR DESIGN

• TOUCH PAD ON THE SIDE SCREEN DISPLAYING SELECTED FLOOR ON TOP
• CURRENT FLOOR DISPLAY ABOVE ELEVATOR
• ARROWS POINTING TO THE DIRECTION MOVING

SUB ELEVATOR INTERFACE

• EXPRESS ELEVATOR (INCLUDE CAFETERIA EXPRESS) : 7 ELEVATORS
• THEMATIC ELEVATORS : 2 FOR EACH THEME, ELEVATORS LOCATED WITIH EACH CATEGORY(DORMITORY, CLASS AUDITORIUM, FACILITIES, ETC)
• CARGO ELEVATORS : 2 ELEVATORS

SUB ELEVATOR BUTTON INTERFACE

OVERALL DESIGN

ACTIVITIES AND FLOOR INFORMATION

• WIFI ZONE
• SCREEN DISPLAY : CAFETERIA MENU, CURRENT EVENT, NEWS, STUDENT EXHIBITION
BACK CUSHION

2/3

ELEVATOR INTERFACE

􏰁􏰀􏰂김가현, 김수현, 류희운, 박지은, 박상준

3/3

ELEVATOR INTERFACE

Elly Jaeyeon Ju, Edward Junwoo Choi, Jeonghoon Baek, Jongeun Lee, Younghyun Kim

Part 1- Problems & Issues

Started off by visiting 3 different sites (all more than 30 floors)
•Samsung World Trade Centre
•63 Building Sky Art
•S-TRENUE Apartment

Part 2- Research & Observation

All buttons look the same. Why are there redundant numbers on buttons and labels next to the buttons?→These make people harder to read (especially for blind people)

2-3 elevators run for different floors→the one that runs through out the whole building requires more power and electricity

People (especially children) fear height - the higher the building, the worse it gets (especially at the 63 Building)→Acrophobia

the capacity of the elevator seemed somewhat smaller compared to the height of the building.→they need more space so that people can get in more at once.