interaction_design_azy
TRANSCRIPT
Interaction Design
Interaction Design
1
Contents
Introduction ................................................................................................................................................... 3
1. The key issues in cognitive psychology and the development of prototype ............................................. 4
1.1 Attention with Application.................................................................................................................. 4
1.2 Mental Model with Application .......................................................................................................... 4
1.3 Miller's 7+-2 what some designers get up to Application ................................................................... 5
1.4 Personal Information Management with Application ......................................................................... 5
1.5 Memory with Application ................................................................................................................... 6
2. Current issues in mobile design and the main results ............................................................................... 7
2.1 Screen size too small ........................................................................................................................... 7
2.2 Responsive design and adaptive design .............................................................................................. 8
2.3 No more multimedia ........................................................................................................................... 9
2.4 Online and Offline Viewing .............................................................................................................. 10
2.5 View of Portrait and Landscape in Android ..................................................................................... 11
3. The design principals and methods ......................................................................................................... 12
3.1 Visibility (Can I see the interaction?) in Application ....................................................................... 12
3.2 Mapping (Where am I & where can I go?) in Application ............................................................... 12
3.3 Affordance (How do I use it?) in Application .................................................................................. 13
3.4 Feedback (What’s the object or device doing right now?) ............................................................... 13
3.5 Pictures are faster than words (Google Android Design Principles) in Application ........................ 14
3.6 I should always know where I am (Google Android Design Principle) in Application ................... 14
3.7 Design Methods Evaluation by use case ........................................................................................... 15
3.7.1 Overview Tourist Help Myanmar application Use Case diagram for ......................................... 15
3.7.2 Documentation of Overview Tourist Help Myanmar application .............................................. 16
4. High Fidelity Prototype ........................................................................................................................... 20
4.1 Overview of Tourists Help Myanmar application ............................................................................ 20
4.2 Home screen in Application .............................................................................................................. 21
4.3 Near Me screen in Application ......................................................................................................... 22
4.4 Hotels screen in Application ............................................................................................................. 23
4.5 Call Centers screen in application ..................................................................................................... 24
4.6 Evaluation of the Tourist Help Myanmar application ....................................................................... 24
Interaction Design
2
5. Conclusion .............................................................................................................................................. 25
6. References ............................................................................................................................................... 26
6.1 Website References ........................................................................................................................... 26
Interaction Design
3
Introduction
The aim of developing the mobile application is to help their needs and requirement of many
countries of older tourists and it is portable and easy to use about this application when they visit our city.
They need the general knowledge interested place and foods and hotel about the city when they before the
start visit. Average people under 50 years old, they don't have the problem to use the mobile application.
But 65 years old people have the many issue in using the mobile application (Example: Memory). Those
older people main issue is Memory.
Everyone gets older; it often becomes harder to remember things. This is called age-associated
memory impairment. Many people over the age of 60 have this common problem. Example: it tends to be
harder to learn new skills the older become, or more easily forget the names of people recently met
(http://patient.info/health/memory-loss-and-dementia).They are frequently forgotten about the things and
others. The application must be memorable and easy to use about the upper case. The application with
many functions and features was trouble in their using the application (e.g. see in Tripadvisor). The
application must be show directly about the main feature because those people will be confusing and can't
be remember easily when they using the application with many features like Tripadvisor. So that the
application is must be easy to use and memorable for those people from the many countries.
Tripadvisor
Interaction Design
4
1. The key issues in cognitive psychology and the development of prototype
1.1 Attention with Application
The interface must be simple to use and more attractive for those people because interface of
information must be structured to get the good attention from the user (See in 1.1 Attention Main Screen).
Those people were not need to get perfect and high tech because it is difficult to use for them. The
vertical list with icon and label text will show in the app of main screen. That’s vertical list is user will
know what need to do in main screen (especially WYSIWYG what you see is what you got) (see in 1.2
Attention hotel screen). Most of the tourists are interested in Hotels, Things to do, Restaurants and etc. So
that’s their main interested list is should be implemented in home screen layout. In the Hotel Screen
should be implement with label text and icon with vertical list view because simple screen layout is very
easy to use and get the attention from those people.
1.1 Attention Main Screen 1.2 Attention Hotel Screen
1.2 Mental Model with Application
The mental models analysis helped to get inside user minds. Those people will be difficult to
remember when using the new icon in mobile application. And also they felt vujade (like nothing you
have ever seen) in that android mobile application because their memory and mind isn’t good to
remember the new icon in android application. There is no problem they don’t have any experience on
using the mobile application the UX icon can be help more memorable than label text (e.g. 1.2.1 hotel
icon and 1.2.2 restaurant icon). So that’s the icon is very important to use in the android application and
icon can be help on using mobile application for those people.
1.2.1 Hotel icon 1.2.2 Restaurant icon
Interaction Design
5
1.3 Miller's 7+-2 what some designers get up to Application
Miller said menu list should be 7 +- 2 for the user attention. More than 7 +- 2 menu isn’t problem
for the under 40 years old people. But 65 years old people are unlikely to watch the many menus in the
home screen because their memory is not good than 40 years old people. So that’s home screen menu
should be implement less than 7 menus because less menu list is easy to remember for those people (e.g
1.3 Home Screen).
1.3 Home Screen
1.4 Personal Information Management with Application
Application should be contain the save screen layout for saving their favorite information about
the hotels or restaurants. These older people and other younger people are wanted to save their favorite
information about the hotel and other in application (e.g. see in 1.4 love button as saving). So that’s save
screen layout help their personal information management about the application content.
1.4 Love Button as Saving
Interaction Design
6
1.5 Memory with Application
Application layout transition response time must be fast when changing to each other layout
because the user can be annoys the app when the transition response time is very slow. That’s slowing
transition response time can be disturb the user memory. And also application screen layout must
memorable design with icon and label text for those people (e.g. 1.5 Memory). Using the UX icons in the
mobile application are good for those people because they can be more memorize. They can know the
function of icon when they see the icon on the screen. And also they should always know where they are
in mobile application by supporting the information top of the left of the screen. It does also can help their
memory.
1.5 Memory
Interaction Design
7
2. Current issues in mobile design and the main results
2.1 Screen size too small
Screen size problem is the screen size small in smart phone. Some of the device has 4.0 inch and
other is 5.0 and more screen size. Whatever, that mobile screen size is too small than the other desktop
and laptop. The laptop screen has default screen size but the mobile does not have the default screen size.
And then when they have surfing the internet their typing area is too small in smart phone. And also
sometime user touched the wrong place on the smartphone because of that also screen size too small in
smartphone (see in 2.1 screen size small when internet surfing). So that my mobile design will be simple
with clearly content to avoid the screen size problem.
2.1 Screen Size small when internet surfing
Interaction Design
8
2.2 Responsive design and adaptive design
The issue is choosing the one of the design from responsive or adaptive. Responsive is the
Responsive design of the content is reliable for the user because responsive design sizing automatically
all of the content on the every device (See in 2.2.1 Responsive Design). Adaptive design is cannot sizing
automatically on the every device. That adaptive design is predefined screen sizes (See in 2.2.2 Adaptive
Design) (http://www.techrepublic.com/blog/web-designer/what-is-the-difference-between-responsive-vs-
adaptive-web-design/). So that I will choose the responsive design for my mobile design because my
mobile design user is old person and also they can any device or smartphone with various screen size
with.
2.2.1 Responsive Design 2.2.2 Adaptive Design
Interaction Design
9
2.3 No more multimedia
The multimedia is important part of the designing. In mobile, we can’t add all of the multimedia
in implementation of mobile designing because the mobile screen is too small and some of the
multimedia type is not compatible with mobile. The video multimedia type isn’t compatible with mobile
application because length of video time is too long and the screen size requirement. In website don’t
need to worry about the length of the video time and screen size. Firstly I need to define which
multimedia type is need to use in my application. Multimedia can be help the user for easy to learning to
the application. So I choose the text, images and audio multimedia type for learning easily to my
application (See in 2.3 screen with multimedia).
2.3 screen with multimedia
Interaction Design
10
2.4 Online and Offline Viewing
The design will be change upon the application is online and offline. Because of the online
application is need connection for the data retrieving. And also online application user can be participate
with reviewing and account register. The online application design must contain the warning message
design for the lack of connection and loading icon and etc. The offline application is very simple. The
data come from the local and also user don’t need to participate for register and reviewing. And also the
offline application is don’t need too much design layout, the main of the offline application is content.
The Offline application response time is faster than the online application. I choose the offline application
because according the case study our city connection is too low and some of the visited place isn’t has the
connection. That’s why I choose the offline. And also offline design layout is more clear than the online
application (see in 2.4.1 tripadivisor online applicaion and 2.4.2 tourists help offline application).
2.4.1 Tripadvisor online application 2.4.2 Tourists Help offline application
Interaction Design
11
2.5 View of Portrait and Landscape in Android
Portrait and landscape mode are two types of screen orientation in smartphone. The user can be
seen with two types of the screen orientation with the application. Designer needs to support or design the
two types of view of the application (e.g. 2.5 Portrait and Landscape View of Skype). That multiple view
of the application is much work for the designer. Every designer can’t against that screen orientation
issue. So designer must be design about two types of screen orientation of the one application. And also
my application will be support the portrait and landscape view for the user.
2.5 Portrait and Landscape View of Skype
Interaction Design
12
3. The design principals and methods
3.1 Visibility (Can I see the interaction?) in Application
All of functions are visible in application according the Don Norman's Design Principles. Visible
functions are user reliable. User doesn’t know the functions are out of sight. It is difficult to use for user.
Visibility drop down button and back button in my application design. (see in 3.1 Visibility drop down
button in application)
3.1 Visibility drop down button in application
3.2 Mapping (Where am I & where can I go?) in Application
It is refer the relationship between controls and their effects in mobile application. All antiquity
required kind of map between controls and effects. Relationship the back button and current screen status
in my application design (See in 3.2 Mapping back button)
3.2 Mapping back button
Interaction Design
13
3.3 Affordance (How do I use it?) in Application
Perceived and actual properties of my application design that give clues to its operation (see in 3.3
Affordance application operation)
3.3 Affordance application operation
3.4 Feedback (What’s the object or device doing right now?)
It is sending back information about what activity has been finish. Love button color change and
audio play when the touching love button as feedback (see in 3.4 feedback love button color change)
3.4 Feedback love button color change
Interaction Design
14
3.5 Pictures are faster than words (Google Android Design Principles) in
Application
Picture multimedia is more understandable than the text. So the UX icon is help to get the
attendance from the user (see in 3.5 pictures are faster than words).
3.5 pictures are faster than words
3.6 I should always know where I am (Google Android Design Principle) in
Application
User will know the current screen information every time when they using the application. The
action bar contains the title information and subtitle (see in 3.6 I should always know where I am).
3.6 I should always know where I am
Interaction Design
15
3.7 Design Methods Evaluation by use case
3.7.1 Overview Tourist Help Myanmar application Use Case diagram for
3.7.1 Overview Use Case diagram for Tourist Help Myanmar application
Interaction Design
16
3.7.2 Documentation of Overview Tourist Help Myanmar application
Primary scenario for Search Near Me use case
Use Case Name: Search Near Me
Pre Condition: system show the hotels, to do and restaurants menu
Actor: Application User
Flow of events:
Use case start when user touch the Near Me menu from the home screen
1. User touch the hotels or To DO or Restaurants menu
The end of the use case, system shows the results of Hotels or To Do or Restaurants list by user location.
Post Condition: system shows the results of Hotels or To Do or Restaurants list by user location.
Primary scenario for Search Hotels use case
Use Case Name: Search Hotels
Pre Condition: system show the hotels list
Actor: Application User
Flow of events:
Use case start when user touch the Hotels menu from the home screen
1. User sorting the hotels list.
2. User touching the desire hotel.
The end of the use case, system shows the detail of hotel.
Post Condition: system shows the detail of hotel.
Interaction Design
17
Primary scenario for Search To Do use case
Use Case Name: Search To Do
Pre Condition: system show the To Do list
Actor: Application User
Flow of events:
Use case start when user touch the To Do menu from the home screen
1. User touching the desire To Do.
The end of the use case, system shows the detail of To Do.
Post Condition: system shows the detail of To Do.
Primary scenario for Search Restaurants use case
Use Case Name: Search Restaurants
Pre Condition: system show the Search Restaurants list
Actor: Application User
Flow of events:
Use case start when user touch the Restaurants menu from the home screen
1. User touching the desire Restaurant.
The end of the use case, system shows the detail of Restaurant.
Post Condition: system shows the detail of Restaurant.
Interaction Design
18
Primary scenario for View Call Centers use case
Use Case Name: View Call Centers
Pre Condition: system show the View Call Centers list.
Actor: Application User
Flow of events:
Use case start when user touch the Call Centers menu from the home screen
1. User touching desire call center.
The end of the use case, system is calling the call center using network.
Post Condition: system is calling the call center using network.
Primary scenario for Check Love Lists use case
Use Case Name: Check Love Lists
Pre Condition: system is show the love list.
Actor: Application User
Flow of events:
Use case start when user touch the Love Lists menu from the home screen
1. User touching desire love list.
The end of the use case, system is show the detail of love lists.
Post Condition: system is show the detail of love lists.
Interaction Design
19
Secondary scenario for Check Love Lists use case
1. a System return null when user isn’t have love as saving information
Use Case Name: Check Love Lists
Pre Condition: system is show the love list.
Actor: Application User
Flow of events:
Use case start when user touch the Love Lists menu from the home screen
1. User touching desire love list.
a. System return null when user isn’t have love as saving information
The end of the use case, system is show the detail of love lists.
Post Condition: system is show the detail of love lists.
Interaction Design
20
4. High Fidelity Prototype
4.1 Overview of Tourists Help Myanmar application
The application objective is to help the tourists who are the 65 years old when they visit to our
city. Firstly user can be seen six of the menu lists in home screen when users open the application. Six of
the menu lists are Near Me, Hotels, To Do, Restaurants, Call Centers, and Love Lists. In Near Me screen,
user can be search by Hotels, To Do and Restaurants by touching the list. Its searching is work with the
user geography location. And then user will be seen the lists of Hotels or To Do or Restaurants with the
miles calculation. User can go the detail page from the lists of Near Me Hotels or To Do or Restaurants.
And then next menu is the hotels screen. In hotels screen, user can be searching the desire hotels
with sorting by rating stars and price. And then user can go the detail of the hotels screen by touching the
desire hotel. Hotel detail page is last of the hotel screen. In that screen, user can be seen the hotel
information and also user can save the hotel information by touching the love button. To Do and
Restaurants screen page is the same with hotels screen page.
Next of the menu is the call centers. Call Centers in our city is very useful for the tourists because
they can be asking to the call centers for police number if they lost their items, crime and etc. Call Centers
can be support the other information. In Call Centers screen, user will be seen the call centers list and then
user can be easily call by touching the each call center.
The last of the menu is the Love Lists. Love Lists mean the user saving the detail of hotel or to do
or restaurants. If user don’t have the any saving love list will be blank. User will be seen the lists upon
their saving and then user can go to the detail of their loving page by touching the each list.
Interaction Design
21
4.2 Home screen in Application
Firstly, User can be seen the UX icon and text in Home Screen. According to mental model, the
UX Icons used for remembering easily about its function but all of those icons are black because user can
be seen clearly between Grey and White color. And also Icon text is black. Action bar is including with
application name and icon in top of the main screen. There have 6 of the main menu with one row vertical
listing. They are Near Me, Hotels, To Do, Restaurants, Call Centers and love lists. This is the important to
get attention from the 65 years old people because they only want to know about the important things of
the city. Those people will be easy to remember about the main screen vertical list in this application
because less menu list is easy to remember according to miller 7+- 2. Each of the lists is can be touch and
go to the next screen upon the touch. The main screen will be easy to use and memorable for those
people. There is no hidden function in the main screen according to visibility design principle. And also
user will be known easily the all of operations in main screen according to affordance design principle
(see in 4.2 Home Screen).
4.2 Home Screen
Interaction Design
22
4.3 Near Me screen in Application
In this screen user can be seen the hotels, To Do and Restaurants menu (see in 4.3.1 Near Me)
and then user will be see the next scree is the calculation of miles with user geographic location by
touching the hotels menu from Near Me screen (See in 4.3.2 Near Me Hotels). Other things on this
screen design are same with Home screen design. Screen title and subtitle on Action Bar help the user to
know the where they are (see in 4.3.2). The back button function is go back to previous screen according
to mapping design principle. That’s also help for their memory because they can know where they are in
mobile application. (see in 4.3.1)
4.3.1 Near Me 4.3.2 Near Me Hotels
Interaction Design
23
4.4 Hotels screen in Application
In application of hotels screen, user will be known about the all of hotels information in our city.
User can be sorted hotels by Stars and price with drop down button (see in 4.4.1 Hotels). And then the
next screen will be appeared when user touched the one item of list. The next screen is the detail
information of the user desire hotels (see in 4.4.2 Hotels Detail). The hotels detail screen contains the
love button in below the action bar (see in 4.4.2 Hotels Detail). The love button is using for the user
saving the detail information of hotels when the user touching the love button its color changed to red
and the audio play according to feedback design principle.
4.4.1 Hotels 4.4.2 Hotels Detail
Interaction Design
24
4.5 Call Centers screen in application
In call center, user will be known call centers number in our city which centers also help some of
their requirements (Example: asking police number). That screen design is like 4.3.1 Near Me. User can
be go back to previous screen by touching action bar back button and the title text according to
mapping design principle (See in 4.5 Call Centers). That’s also help for their memory because they can
know where they are in mobile application.
4.5 Call Centers
4.6 Evaluation of the Tourist Help Myanmar application
Firstly the Tourist Help Myanmar application (THM) design is very simple and easy to use for 65
years old people. They will easy to remember for all process in the application. THM is offline
application and don’t need the internet connection. So the user not need to worry for the application
doesn’t work in lack of connection case. The THM contain main feature for the user requirement. Other
fancy feature not contain in this application. Fewer features in the application can help the user attention.
Second the Tripadvisor design is very complex and difficult to user for 65 years old people. They
can’t remember easily all of the process in the application. Tripadvisor is online application and need the
internet connection going everywhere. So the user has the worry about when they will visit the place with
the lack of connection. That application doesn’t work every time when they don’t have the connection.
And also Tripadivisor application contains many features and fancy feature. Example send postcard
feature in the Tripadvisor application doesn’t require all the time. That is the fancy feature for
Tripadvisor.
Interaction Design
25
5. Conclusion
The THM application of the user is tourists who are 65 years old. Their requirement is application
can help the explore areas of interest and making recommendation for future visits to the area in the
application. Average people under 50 years old, they don't have the problem to use the mobile
application. But 65 years old people have the many issue in using the mobile application (Example:
Memory). Those older people main issue is Memory.
So firstly, we discussed the cognitive psychology for them. The discussion result of the cognitive
psychology is we will know how to get the customer attention in the application, how to help their
memory for easy to remember when we implementing the design, what is their mental and what UX icon
is help for them, how many menus should help in the application according the miller 7+-2, how to record
their favorite information in the application. So result of the discussion is perfect to the implementing the
application.
Secondly, we discussed about the current issue in mobile design. That discussion helps how to
avoid the issue and how to get the good results in the application design. Thirdly, we discussed the
android design principles and standards plus evaluation method. Discussion of the android design
principle is perfect to the application design and user experience. And also the discussions of design
standard help how to avoid the user confusing. Last discussion is evaluation method of application design.
That discussion help the what process need in the application and who is the actor for the application.
Finally, drawing and evaluation the High-fidelity prototype. The High-fidelity prototype
drawing with the cognitive psychology, design principles. The application design goal is upon to
the user requirement and condition. The aim of the application design is helping to the tourists
who are 65 years old when they visit to our city. So they can be easy to use the application
without confusing.
Interaction Design
26
6. References
6.1 Website References
Dr Tim Kenny, 22/05/2014, http://patient.info/health/memory-loss-and-dementia (Visited time:12:05 PM
4/24/2016)
Ryan Boudreaux, April 11, 2013, 12:56 AM PST, http://www.techrepublic.com/blog/web-designer/what-
is-the-difference-between-responsive-vs-adaptive-web-design/ (Visited time: 12:07 PM 4/24/2016)
Google, 4/24/2016, http://developer.android.com/design/get-started/principles.html (Visited time: 12:08
PM 4/24/2016)
Don Norman, Jan 8, 2008 (http://www.slideshare.net/gelvan/design-principles) (visited time: 11:59 AM
4/24/2016)