1 - Introduction to Concept Mapping | Mobile App | Application Software

Compiled with the assistance of the Tiger University Program of the Estonian Information Technology Foundation

Concept Mapping and Prototyping
Ilja Šmorgun

My Background
• B.Sc - Computer Science • M.Sc - Interactive Media and Knowledge
Environments

• PhD - Information Society Technologies • Estonian Information System’s Authority
(Riigi Infosüsteemi Amet) - Usability Specialist

What is your background?

What are the issues of working in teams?

What are we going to learn?

Course Topics
• An overview of concept mapping • How to establish an application concept • How to draw sketches • How to create mockups • How to create interactive prototypes

A Lot of Ground to Cover

A Lot of Practical Work

You are Expected to Actively Participate

The Project

Make a team and create an interactive prototype

Team Project
1. Choose a platform 2. Choose a technology 3. Come up with an application concept 4. Create sketches 5. Create mockups 6. Create an interactive prototype

Focuse on Mobile
• Mobile first • It’s simpler • Forces you to focus on the core
functionality

Context

The best camera is the one you have with you when something interesting happens.

The best computer is the one you have with you when you want something done.This will often be your phone or tablet. 
-Jakob Nielsen

Mobile devices have become pervasive

Most people carry one, have them turned on almost continuously and use them in different contexts 

The Evolution of Smartphones

The Evolution of Tablets

The Evolution of Mobile Devices
• The design is dominated by the screen • Multi-touch based interactions • The device becomes the content • Always on, always connected

Mobile Usage
• Informational needs • Geographical needs • Personal information management needs

Informational needs are focused on the goal of obtaining information about a topic

“Is the Arsenal game on TV tonight?”

Geographical needs are focused on the goal of finding an answer to a question

The expected answer is dependent on location in some form

“Nearest Pennies or Dunnes Stores” 

“Where do I get coffee?” 

“Direction from Belfast to Randaldstown” 

Personal information management (PIM) needs are focused on finding out something private relating to the individual

PIM needs encompass personal items, friend requests, scheduling tasks and to-do list items

“What are my airline loyalty pin codes?”

The mobile phone and other personal mobile devices have gained a new role 

A gateway to data and applications which are stored on the network

What to consider when designing mobile applications?

Native, web application or both?

Native Applications
• Provide a richer experience • Integrate with various operating system
features

• Need to be approved in the App Store

Web Applications
• Can be used on a multitude of platforms • Don’t need to be approved in the App
Store

• Functionality is limited, because they only
work in the browser

Questions
• What features of the mobile device does
your application need to use?

• Does it need to work offline? • How are people going to use your app? • How much will it cost? • Do you need to support various screen
sizes?

Following UI Conventions
• Human Interface Guidelines • Don't break existing patterns • Design for touch interaction

That’s all good but how do you design?

By following a process

Such as interaction design

Interaction Design
• Designing interactive products • Defining the structure and behavior of
interactive systems

• Focusing on satisfying the needs of users

The Stages of Interaction Design

Stakeholders

Stakeholders

Stakeholders

Stakeholders

Reports

Users

Users

Users

Users

Texts UML Flowcharts State transition diagrams Decomposition diagrams

Developers

Developers

Developers

Developers

Actors
Illustrators Illustrators Illustrators Illustrators

Graphical illustrations

Interaction Designers

Interaction Designers

Interaction Designers

Interaction Designers

UML Flowcharts State transition diagrams Decomposition diagrams

Stages

Research Iteration Stage

Design Iteration Stage

Development Iteration Stage

Production Stage

Activities

Data collection Building concepts Testing Making changes

Sketching Writing code Creating mockups Prototyping Testing Testing Making changes Making changes

Promoting Positioning Marketing

Stakeholders

Stakeholders

Stakeholders

Stakeholders

Reports

Users

Users

Users

Users

Texts UML Flowcharts State transition diagrams Decomposition diagrams

Developers

Developers

Developers

Developers

Actors
Illustrators Illustrators Illustrators Illustrators

Graphical illustrations

Interaction Designers

Interaction Designers

Interaction Designers

Interaction Designers

UML Flowcharts State transition diagrams Decomposition diagrams

Stages

Research Iteration Stage

Design Iteration Stage

Development Iteration Stage

Production Stage

Activities

Data collection Building concepts Testing Making changes

Sketching Writing code Creating mockups Prototyping Testing Testing Making changes Making changes

Promoting Positioning Marketing

Stakeholders

Stakeholders

Stakeholders

Stakeholders

Reports

Users

Users

Users

Users

Texts UML Flowcharts State transition diagrams Decomposition diagrams

Developers

Developers

Developers

Developers

Actors
Illustrators Illustrators Illustrators Illustrators

Graphical illustrations

Interaction Designers

Interaction Designers

Interaction Designers

Interaction Designers

UML Flowcharts State transition diagrams Decomposition diagrams

Stages

Research Iteration Stage

Design Iteration Stage

Development Iteration Stage

Production Stage

Activities

Data collection Building concepts Testing Making changes

Sketching Writing code Creating mockups Prototyping Testing Testing Making changes Making changes

Promoting Positioning Marketing

The First Thing To Do

Establish an Application Concept

The Application Concept
• What does your application do? • Who is your target audience? • How will people use your application? • How much will the application cost?

But how do you do that?

You can write notes or...

Use concept mapping

Some Background Information
• Created in 1970s at Cornell University • Support meaningful learning - a student is

able to not only receive new information but also effectively incorporate it into the previously established cognitive structure

So What is a Concept Map Exactly?
• Boxes and arrows • A diagram showing relationships between
concepts

• Represents relationships between ideas • Makes it easier to communicate ideas in
teams

In Addition
• Successfully applied in education,
government and business and researchers structured way

• Easily understood by both school children • Presents information in a visual and • Surfaces strengths and weaknesses of ideas

An Example

Why do we have seasons?

Drawbacks
• Concept maps do not easily scale • A lot of nodes make a concept map difficult
to read

But how does this exactly relate to design?

Stakeholders

Stakeholders

Stakeholders

Stakeholders

Reports

Users

Users

Users

Users

Texts UML Flowcharts State transition diagrams Decomposition diagrams

Developers

Developers

Developers

Developers

Actors
Illustrators Illustrators Illustrators Illustrators

Graphical illustrations

Interaction Designers

Interaction Designers

Interaction Designers

Interaction Designers

UML Flowcharts State transition diagrams Decomposition diagrams

Stages

Research Iteration Stage

Design Iteration Stage

Development Iteration Stage

Production Stage

Activities

Data collection Building concepts Testing Making changes

Sketching Writing code Creating mockups Prototyping Testing Testing Making changes Making changes

Promoting Positioning Marketing

A technique, which can be used to support interaction design processes through various stages

Support
• Elicitation • Communication • Representation • Adaptation

Elicitation

Drawing forth or bringing out specific knowledge

Communication

Transmitting knowledge between individuals by using a common system of symbols

Representation

Bringing knowledge clearly before the mind

Adaptation

Making knowledge fit for a new use by modification

Stakeholders

Stakeholders

Stakeholders

Stakeholders

Reports

Users

Users

Users

Users

Texts

Concept mapping

Developers

Developers

Developers

Developers

Actors
Illustrators Illustrators Illustrators Illustrators

UML Flowcharts State transition diagrams Decomposition diagrams

Graphical illustrations

Interaction Designers

Interaction Designers

Interaction Designers

Interaction Designers

UML Flowcharts State transition diagrams Decomposition diagrams

Stages

Research Iteration Stage

Design Iteration Stage

Development Iteration Stage

Production Stage

Activities

Data collection Building concepts Testing Making changes

Sketching Writing code Creating mockups Prototyping Testing Testing Making changes Making changes

Promoting Positioning Marketing

A Practical Example

iRadio

Application Concept

Find frequencies of favorite radio stations on the go

How to Build Concept Maps?
1. Identify a focus question 2. Identify 10 to 20 concepts that are related to the focus question 3. Begin to build your map by placing the most inclusive, most general concept(s) at the top 4. Select two, three, or four subconcepts to place under each general concept 5. Connect the concepts by lines 6. Label the lines with or a few linking words 7. Look for crosslinks between concepts in different sections of the map and label these lines

Building a Concept Map for a Reminders App

The Reminders App
1. Choose a tool 2. Come up with relevant concepts 3. Create a hierarchy 4. Link concepts together 5. Look for cross-links 6. Look for missing concepts

Choosing a Tool for Concept Mapping

CmapTools

OmniGraffle

Visio

Pen and Paper

Let’s Build Our First Concept Map

Your Assignment
1. Make teams of 3-4 people 2. Make several concept maps describing your application 3. Present concept maps to your colleagues 4. Collect feedback and improve your concept maps

Please present your work at 15:00

Sign up to vote on this title
UsefulNot useful