+ All Categories
Home > Documents > Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size...

Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size...

Date post: 26-Jul-2020
Category:
Upload: others
View: 1 times
Download: 0 times
Share this document with a friend
37
5/1/16 1 Ilokano To Go! Development & Usability of a Language Learning Mobile App Bhonna Gaspar [email protected] www.bhonnagaspar.com Presentation overview Background Design & Development Usability Study Moving Forward Personal Reflection
Transcript
Page 1: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

1

Ilokano To Go! Development & Usability of a Language Learning Mobile App

Bhonna Gaspar • [email protected] • www.bhonnagaspar.com

Presentation overview

⃟ Background

⃟ Design & Development

⃟ Usability Study

⃟ Moving Forward

⃟ Personal Reflection

Page 2: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

2

Background Who am I and why did I choose this project?

Background Who am I and why did I choose this project?

⃟ Educational background in computer science and second language studies

Page 3: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

3

Background Who am I and why did I choose this project?

⃟ Educational background in computer science and second language studies

⃟ PTT, NB-ELL Project Assistant

Background Who am I and why did I choose this project?

⃟ Educational background in computer science and second language studies

⃟ PTT, NB-ELL Project Assistant

⃟ Interested in mobile language learning, app development, user interface design and the user experience

Page 4: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

4

Background Who am I and why did I choose this project?

⃟ Educational background in computer science and second language studies

⃟ PTT, NB-ELL Project Assistant

⃟ Interested in mobile language learning, app development, user interface design and the user experience

⃟ Ilokano background

Do you have any experience with any language learning apps?

A. Yes

B. No

C. Maybe?

Audience Poll

Page 5: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

5

Do you have any experience with the Ilokano language?

A. Yes

B. No

C. Maybe?

Audience Poll

Background ⃟ Ilokano (or also Ilocano) is one of several

languages spoken in the Philippines

Page 6: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

6

Background ⃟ Ilokano (or also Ilocano) is one of several

languages spoken in the Philippines

⃟ Considered the language of Philippine diaspora

Background ⃟ Ilokano (or also Ilocano) is one of several

languages spoken in the Philippines

⃟ Considered the language of Philippine diaspora

⃟ 90% of Philippine population in Hawaii is Ilokano

Page 7: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

7

Background ⃟ Ilokano (or also Ilocano) is one of several

languages spoken in the Philippines

⃟ Considered the language of Philippine diaspora

⃟ 90% of Philippine population in Hawaii is Ilokano

⃟ Ilokano classes offered at the University of Hawaii

Background ⃟ Ilokano (or also Ilocano) is one of several

languages spoken in the Philippines

⃟ Considered the language of Philippine diaspora

⃟ 90% of Philippine population in Hawaii is Ilokano

⃟ Ilokano classes offered at the University of Hawaii

⃟ Very few web tools or mobile apps available

Page 8: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

8

Background ⃟ Ilokano is currently being offered as a language

course at the University of Hawaii

Background ⃟ Ilokano is currently being offered as a language

course at the University of Hawaii

⃟ Follow a structured program

Page 9: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

9

Background ⃟ Ilokano is currently being offered as a language

course at the University of Hawaii

⃟ Follow a structured program

⃟ Textbook

Background ⃟ Ilokano is currently being offered as a language

course at the University of Hawaii

⃟ Follow a structured program

⃟ Textbook

⃟ Learn “in the context of simulated real-world experiences that are acted out in the classroom”

Espiritu, P. (1984). Let’s Speak Ilokano. University of Hawaii Press.

Page 10: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

10

Background ⃟ Develop a user friendly language learning mobile

application

Background ⃟ Develop a user friendly language learning mobile

application

⃟ Navigability

⃟ Aesthetics

⃟ Usefulness

Page 11: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

11

Background ⃟ Develop a user friendly language learning mobile

application

⃟ Navigability

⃟ Aesthetics

⃟ Usefulness

⃟ Understand the process of and complete a usability study

⃟ Development Tool Search

Design & Development

Page 12: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

12

⃟ Development Tool Search

⃟ Criteria

Design & Development

⃟ Development Tool Search

⃟ Criteria

⃟ Create and package applications to Android devices

Design & Development

Page 13: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

13

⃟ Development Tool Search

⃟ Criteria

⃟ Create and package applications to Android devices

⃟ Free, or low-cost

Design & Development

⃟ Development Tool Search

⃟ Criteria

⃟ Create and package applications to Android devices

⃟ Free, or low-cost

⃟ Low learning curve

Design & Development

Page 14: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

14

⃟ Development Tool Search

⃟ Criteria

⃟ Create and package applications to Android devices

⃟ Free, or low-cost

⃟ Low learning curve

Design & Development

Design & Development

Page 15: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

15

Design & Development

Design & Development

Wireframe

Paper Prototype

Working Prototype

Page 16: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

16

Design & Development: Wireframe

Design & Development

ABOUT

Ilokano To Go! Is a mobile app designed to assist Ilokano language learners. ...

Design & Development: Paper Prototype

PLAY ABOUT

Design & Development

Page 17: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

17

Design & Development: Paper Prototype

Design & Development

Design & Development: Working Prototype 1

Design & Development

Page 18: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

18

Design & Development: Working Prototype 1

Design & Development

Create Working

Prototype

Conduct Usability Test 1

Revise/Edit

Prototype

Conduct Usability Test 2

Revise/Edit

Prototype

Usability Test

Page 19: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

19

⃟ Pre-test Survey

⃟ Usability Protocol

⃟ Observation Checklist

⃟ Post-test Survey

Usability Test

⃟ 6 participants total

Usability Test: Demographics

Page 20: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

20

⃟ 6 participants total ⃟ 2 Male, 4 Female

Usability Test: Demographics

⃟ 6 participants total ⃟ 2 Male, 4 Female ⃟ Age range: 22-31

Usability Test: Demographics

Page 21: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

21

⃟ 6 participants total ⃟ 2 Male, 4 Female ⃟ Age range: 22-31 ⃟ All participants of Ilokano descent

Usability Test: Demographics

⃟ 6 participants total ⃟ 2 Male, 4 Female ⃟ Age range: 22-31 ⃟ All participants of Ilokano descent ⃟ Exposure to Ilokano ranged from a few days a month to every day

Usability Test: Demographics

Page 22: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

22

⃟ 6 participants total ⃟ 2 Male, 4 Female ⃟ Age range: 22-31 ⃟ All participants of Ilokano descent ⃟ Exposure to Ilokano ranged from a few days a month to every day ⃟ All participants owned a smartphone, but only 2 had experience

with language learning apps

Usability Test: Demographics

Usability Test: Navigability

Page 23: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

23

⃟ Things were “nicely/appropriately labeled”

Usability Test: Navigability

⃟ Things were “nicely/appropriately labeled” ⃟ “everything was self-explanatory and easy to navigate to”

Usability Test: Navigability

Page 24: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

24

⃟ Things were “nicely/appropriately labeled” ⃟ “everything was self-explanatory and easy to navigate to” ⃟ “Search bar to enter a question. Or faq screens”

Usability Test: Navigability

⃟ Increase font size (vocabulary list)

Usability Test: Aesthetics

Page 25: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

25

⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words

Usability Test: Aesthetics

⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when they are flipped over

Usability Test: Aesthetics

Page 26: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

26

⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when they are flipped over ⃟ Green background for correct answers, red background for

incorrect answers

Usability Test: Aesthetics

BEFORE AFTER Usability Test: Aesthetics

Page 27: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

27

BEFORE AFTER Usability Test: Aesthetics

Usability Test: Usefulness

Page 28: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

28

Most requested features to increase usefulness: ⃟ Audio ⃟ Images

Usability Test: Usefulness

Usability Test

Page 29: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

29

Usability Test

⃟ Addition of audio files and pictures

Moving Forward

Page 30: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

30

⃟ Addition of audio files and pictures ⃟ Addition of content, dialogues, and other resources

Moving Forward

⃟ Addition of audio files and pictures ⃟ Addition of content, dialogues, and other resources ⃟ Mascot

Moving Forward

Page 31: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

31

Personal Reflections

What worked… ◇ Critical friends, class, and instructor feedback ◇  Ilokano 101 and 102 textbooks ◇ Timeline/milestones to set work pace ◇ MIT App Inventor

Personal Reflections

What worked… ◇ Critical friends, class, and instructor feedback ◇  Ilokano 101 and 102 textbooks ◇ Timeline/milestones to set work pace ◇ MIT App Inventor

What didn’t work… ◇ Having $0 – no participants ◇ MIT App Inventor

Page 32: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

32

Interface Comparisons

Interface on computer VS. Actual interface

App Inventor Screenshot

Page 33: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

33

App Inventor Screenshot

App Screenshots

Page 34: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

34

App Screenshots

App Screenshots

Page 35: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

35

Personal Reflections

Next time… ◇ Start earlier

Personal Reflections

Next time… ◇ Start earlier ◇ Better time management

Page 36: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

36

Personal Reflections

Next time… ◇ Start earlier ◇ Better time management ◇ Explore more app development environments

LTEC Instructors Dr. Fulford

Critical Friends (Dean & Rick) Classmates

Thank You!

Page 37: Ilokano To Go! · 2016-08-11 · Usability Test: Aesthetics . 5/1/16 26 ⃟ Increase font size (vocabulary list) ⃟ Add images to vocabulary words ⃟ Add border to flashcards when

5/1/16

37

?

[email protected] www.bhonnagaspar.com

Questions


Recommended