+

Course
Overview

CS2002S: Mobile Development and

Design
Melissa Densmore
University of Cape Town

Welcome to Mobile Design and Development! This presentation is an overview of what to

expect in this class.

1
+
Course Overview

Mobile Operating
What is Mobile? Coding Apps
Systems

UI Design for Input and

Mobile Web
Mobile Visualizations

Melissa Densmore, UCT CSC2002S

Over the course of this module, we’ll cover a number of topics.

2
+
What is this course about?

• Hardware
• Network
Mobile • Social
• Context

• Platforms
Development • SDKs
• Architectures

• Patterns
& • Interaction
• Input
Design • User Experience

Melissa Densmore, UCT CSC2002S

This course will introduce you to some basics of mobile architecture and software
development, but the focus is on interaction design for mobile apps and services.

Mobile is a such a great space in which to consider interaction design – the range of input
possibilities in terms of form factors and sensors, and the range of interaction possibilities
from day-to-day banking to mobile games and augmented reality makes it critical for us to
better understand our users in order to design the best interfaces for them.

A little design goes a long way, but most of that design is directed at consumer-
oriented users in bandwidth-rich contexts, it’s not designed for African contexts!
So, throughout this course we will also specifically consider what it means to design
inclusive solutions that are cognizant of the diversity of contexts in which they
might be used.

What do you hope to learn? What do you wish you could do on your mobile devices?

3
 5 May, 2015

+
Human-
Computer
Interaction Lab
Promoting community-based innovation
towards connecting communities and
improving maternal and child well-being.
Co-designing with Mothers and Neonatal Unit Staff:
Use of Technology to Support Mothers of Preterm
Infants. C. Mburu, C. Wardle, Y. Joolay, and M.
Densmore. In Proceedings of AfriCHI2018.
Windhoek, Namibia. December 2018
Exploring Co-Design with Breastfeeding Mothers. C.
Wardle, M. Green, C. Mburu, and M. Densmore. In
Proceedings of CHI 2018, with Honorable Mention.
Montreal, Canada. April 2018.

So why am I here? My research is in human-computer interaction for

development – I’m working with communities and researchers here to
better understand how Africans engage with digital resources, including
mobile phones, and to co-design novel approaches to suit local needs,
seeking to design with the target users rather than repurposing apps
developed for others. I’m especially interested in ways to support
creation of local content and services in bandwidth-constrained contexts.

I run the Human-Computer Interaction lab at UCT, as well as the UCT

branch of the Hasso-Plattner Institute Research School.

Our focus is on understanding community-based innovation towards

connecting communities and improving maternal and child well-being.
While this often involves development of mobile apps - projects are
often more than just the app, and really geared towards building a better
understanding of how people interact with computing and
communication devices.
+

Co-Design with Parents for

Maternal and Child Health
5

A lot of my work engages with parents and health workers to identify problems and co-
design approaches to those problems. This includes the Milk Matters app for breastmilk
donors and the Preemie Care app for parents of premature infants.

https://www.news.uct.ac.za/article/-2020-09-11-uct-built-app-to-support-babies-in-need-
of-breast-milk

5
 The iNethi project seeks to foster
community-based content and
services leveraging local network
infrastructure such as community
wireless networks.

Localize-It: Co-designing a Community-Owned

Platform. M.R. Lorini, M. Densmore, D Johnson,
S Hadzic, H Mthoko, G Manuel, M. Waries, and A.
van Zyl. In Proceedings of IDIA2018. Gauteng,
South Africa. August 2018.

inethi.net
University of Cape Town Computer Science
School of Information Technology
ict4d.cs.uct.ac.za

In another project, we are building software systems to support community-owned

wireless networks, seeking to make communications infrastructure for connecting people
within a community, not just connecting people to the internet.

6
+
So what’s the big deal about mobiles?

Melissa Densmore, UCT CSC2002S

• So what’s the big deal about mobiles? This is probably quite obvious. Mobiles and
mobile services are a significant part of our economy. And how we design mobile
services and apps will have a strong influence on ongoing equality and inequality
where we are. To what extent do you think we as computer scientists have the power
to shape our world? To what extent have you seen mobile services and apps already
shaping your own interactions with people around you. From social networks to maps
and media, according to WeAreSocial’s report, South Africans are spending 3.5 hours
per day using mobile internet (+5 hours on our computers).

• Mobiles are ubiquitous

• What’s significant about mobile devices?
• What do you hope to get out of this class?

(Source: GSMA Intelligence)

http://www.chinesenewyear.standardbank.com/CIB/About-us/Insights-Hub/African-apps-
rise-as-mobile-and-smartphone-penetration-soars

7
+
Digital 2020
We Are Social, Hootsuite

Melissa Densmore, UCT CSC2002S

And when you dig into the data, it’s apparent that mobile is really how most people access
the internet.

https://datareportal.com/reports/digital-2020-south-africa

8
+
Why is Design important?

Melissa Densmore, UCT CSC2002S

Now we know mobiles are important – but why is design important? Good design affects
whether and how often people will use what you develop. Where you are forced to use
services like Peoplesoft and Vula, you’re willing to live with poor design because you don’t
have a choice. But with mobile apps, we don’t use apps because we have to, we use them
because we choose to.

https://www.statista.com/chart/3835/top-10-app-usage/

Note: this is based on US users.

We need African designers who can design for African contexts.

9
+
Housekeeping

n Office Hours by appointment:

https://calendly.com/melissa-densmore/

n Contact: melissa.densmore@uct.ac.za

n Questions: use Teams, talk to the tutors, send me an email, or book an appointment
(in that order)

n MDD1 (A3) and MDD2 (A4) to be posted this week

Melissa Densmore, UCT CSC2002S

10
+
A word of warning!

n Pay attention to details on lessons

n Additional resources (some required, some optional) will be available alongside the
lecture recordings and slides

n The future of mobiles is wide open

n A lot is open for debate
n Waaay too much to cover in 4 weeks!

n Suggested optional texts and further reading

n Preece, Jenny, Yvonne Rogers, and Helen Sharp. Interaction design: beyond human-
computer interaction. 5th Edition. John Wiley & Sons, 2019.
n Interaction Design Foundation: https://www.interaction-design.org/literature

Melissa Densmore, UCT CSC2002S

11
+

What is
Mobile?

CS2002S: Mobile Development and

Design
Melissa Densmore
University of Cape Town

CSC2002S Melissa Densmore, UCT

12
+ 13

Why is mobile important?

what’s the bestselling product of all time?

Harry
Bibles 6B
Potter 450M

Rubik’s
Cube 350M
Smart
Phones
1.6B in
2020

Melissa Densmore, UCT CSC2002S

Mobiles have an undeniable influence on our lives, and on our local economy.

13
 14

Melissa Densmore, UCT CSC2002S

The mobile ecosystem has arguably had a positive effect on development, contributing 9%
to the Gross Domestic Product in SSA, and supporting 2 million jobs.

https://www.gsma.com/mobileeconomy/sub-saharan-africa/

14
+ 15

#Social Movements
Twitter, WhatsApp, FireChat, and more…

Melissa Densmore, UCT CSC2002S

Mobile communication has also played a critical role in social movements, in South Africa
and all over the world – to the point where some countries will shut down the mobile
operators to quell riots or manipulate elections.

15
 16

Melissa Densmore, UCT CSC2002S

We are social regularly releases reports on the state of digital worldwide, with specific
country reports. According to their reports, The number of mobile connections in South
Africa Increased by 3.1 million (+3.1%) between January 2019 and January 2020.

I strongly encourage you to read the 2020 report for South Africa !

16
 17

Melissa Densmore, UCT CSC2002S

Significantly, in South Africa mobiles heavily dominate laptops and desktops for internet
usage, as well as ownership. At the same time, our data is slower and more costly.

17
+ 18

Personality

Melissa Densmore, UCT CSC2002S

Mobile devices and our use of them say a lot about ourselves – we use mobiles to
represent ourselves online, and customize our devices to help capture our own personality
even in the real world. It’s an essential accessory.

18
 19

Melissa Densmore, UCT CSC2002S

But mobile devices and social media also have a dark side. Fake news, phone addiction, and
privacy are ongoing concerns – and we as computer scientists will play a significant role in
how this aspect of computing will unfold in our future.

19
+ 20

Diversity

Melissa Densmore, UCT CSC2002S

Mobile devices come in many form factors and sizes – from feature phones to smartphones
of all sizes. However mobile also just isn’t phones – it includes a range of smart devices,
some of which may or may not be obviously computing devices. Mobile chipsets are being
integrated into more and more consumer devices.

Image credits:
https://www.build-review.com/smart-home-tech-in-apartments-is-the-way-of-the-future/
https://nerdtechy.com/best-wifi-sd-card
https://techcrunch.com/2018/03/07/all-of-oculuss-rift-headsets-have-stopped-working-
due-to-an-expired-certificate/
https://www.gearpatrol.com/tech/a477352/best-smartwatches/
https://pocketnow.com/microsoft-surface-book-3-detached-ideals-video

20
+ 21

Lumkani – IoT Fire Detectors

Melissa Densmore, UCT CSC2002S

Including fire detectors designed for townships in South Africa. Good user-centered design
has great potential for making a positive impact in the world around us.

https://lumkani.com

21
+ 22

Are laptops and tablets mobile?

Melissa Densmore, UCT CSC2002S

You maybe saw surface on a previous slide. Are laptops and tablets mobile devices?
Strictly speaking yes – but the development ecosystem and the ways in which they are used
can vary quite a bit by form factor. Consider your own use – what do you choose to do on
one vs another?

Yet we’re seeing convergence – the desire to have our experience to be seamless across all
of our communication-enabled devices is pushing us towards devices that blur the lines
between how we experience devices differently.

22
+

Your mobile
• Why did you choose it?
• Name one good interaction design feature
• Name one bad interaction design feature
• Name one interesting interaction design
feature

Melissa Densmore, UCT CSC2002S

So pause for a moment and think about your own mobile. Why did you choose your
particular device. What apps do you spend the most time on? Or if you don’t have a
smartphone, consider the implications of this choice. Either way – how has the design of
the phone or services you access with the phone impacted your experience, either for good
or for bad?

23
 24

Melissa Densmore, UCT CSC2002S

Phones used to be primarily for person-to-person voice calls. And the introduction of
mobile phones revolutionized how people communicate! But more and more I’m realizing
how rarely I actually use the phone this way anymore. I add a data bundle to my account
once a month, but I only add airtime about once every 6 months, and then usually when
the airtime has been accidentally depleted because I forgot to get a new data bundle. All
my incoming calls are from Takealot drivers and spam callers.

Image Credit: https://www.saturdayeveningpost.com/2018/06/lost-art-phone-call/

24
 25

https://www.exeter.ac.uk/eventexeter/evolution-communication/

Melissa Densmore, UCT CSC2002S

But communication is more than just voice calls.

Note: see https://tools.ietf.org/html/rfc2549 for a protocol for sending IP traffic using

pigeons…

25
 26

+
Phone is Everything
watch alarm email games weather banking
water talking checking-in calculator flashlight
showing-off calendar web maps navigation
friend camera videos memories baby-monitor
books passwords bible news social-networking
shopping hustling music
boarding-pass flashdrive emergencies

Melissa Densmore, UCT CSC2002S

And phones are for more than just communication.

Think about all the ways you’ve used your phone in the past day or week. For me – alarm
clock, bible study, countdown timer, radio, bank, WhatsApp. The list goes on!

The phone is the swiss army knife of our lives, it does everything!

26
+ 27

Mobile is Context
social | technology | environment | infrastructure

Melissa Densmore, UCT CSC2002S

But not everyone’s phones are the same. The really interesting thing about studying how
people use phones is that we all use phones in so many different ways and contexts. From
fishermen tracking their catches (abalobi.info) to kids playing games, from Khayelitsha to
Beijing, how we use phones is embedded in context of infrastructures, norms, and desires.
It’s embedded in its many domains of use, in data pricing structures, power dynamics and
even gender and race relations.

So in this class I encourage you to think beyond the bits and chips that make up mobile
devices – and to look further, and to use context to help design better mobile systems.

27
+

User-Centered
Design

CS2002S: Mobile Development and

Design
Melissa Densmore
University of Cape Town

28
+
Interaction Design
“The design of spaces for human
communication and interaction”
(Winograd 1997)

CSC2002S

Consider all the computing devices you interact with in a day. Even without smartwatches
and smartphones, you might interact with headphones, printers, door scanners, payment
card scanners, remote controls, coffee machine, and ATMs.

What’s your experience of each of these? Pleasant, potentially invisible or frustrating and
unpredictable? Are they usable?

Let’s say you have a smartphone. How many apps do you have? How many do you use?
How many have you uninstalled? What makes you choose one app over another? What
makes you keep checking social media or playing a particular game?

Interaction design is about understanding the dynamics of how we interact with computing
devices, from high level questions around using particular apps, to how people understand
specific icons and widgets in the interface, to social dynamics around computing device
use.

29
+
Engineers are Terrible
Designers

Melissa Densmore, UCT 15 Aug 2018

The big problem, however, is that most people that are good at programming tend to have
terrible instincts for what users actually want. To get better at this, HCI is interdisciplinary –
drawing upon other disciplines – like social science, psychology, to help inform our design
principles and approaches.

30
+
Goals
High level goals Key Performance Indicators
n User retention

n More clicks/screen time

Easy to Effective to n More ad views

learn use
n Persuasion

n …

à making more money!

Enjoyable
à political objectives

CSC2002S

At a high level – user interaction designers seek to build applications that are learnable,
discoverable, effective, and not just usable, but pleasant to use.

At the second order, however, we have lots of different goals, from getting lots of likes and
user retention to perhaps social good goals like improving how people use masks or
understand their health. Perhaps on the more sinister end, apps and services are designed
and manipulated to foster addiction or affect public opinion, as noted in the dramatized
documentary “the social dilemma” and fears of foreign governments manipulating
elections.

31
 CSC2002S

So how do we get there? How do we become good designers?

Good designers often follow both written and unwritten design principles – standards and
guidelines that help us to predict whether someone will like a particular interface, and will
help us to design something people will be able to use. We’ll go over more of these in
detail throughout the course.

Poster from
https://uxdesign.cc/the-practicality-of-neilsons-10-91cd4a6fb61c

10 Usability Heuristics by Jakob Nielsen. Layout designed by Jon Daiello.

32
+
The Design Cycle

User-centred design
starts and ends with Design Prototype
real users.
observation, surveys,
workshops, focus
groups, interviews, logs,
measurements

Evaluate

CSC2002S

However, it’s not enough to just follow the principles – every group of users can be quite
different, and new interfaces may not have tried-and-true standards for implementation.

Some of the key aspects of good user-centered design overlap with what we’ll cover in
advanced software development next semester. Iterative development coupled with
customer or user engagement helps us to get to designs that ultimately work better for the
actual real users of the systems. It also happens to help us work better together.

The design cycle is core to our approach to doing design in a user-centered way. So while
you *might* start with your own intuition and design principles, you continue by engaging
with real users and adjusting your designs as you go. You start by evaluating what you know
about the users – then based on that, come up with a design. Finally, you actually build
something. This then starts the next cycle – an evaluation of what you’ve prototyped,
analysis of the findings, resulting in a new design, followed by building the prototype. This
continues as long as you have time until everyone is satisfied with the final product.

33
+
Design Thinking

CSC2002S

You’ll see some version of the design cycle in most user-centered approaches, including
that of the School of Design thinking (at UCT, Stanford and in Potsdam)

Your first assignment is based on a user-centered approach called design thinking, which
also takes a cyclical approach. Design thinking is popular in business circles as something
that’s easy to learn and implement, and applied both for computing interface design as well
as for processes and anything else you can imagine.

34
+
Summary

n Interaction Design is the design of spaces for human communication and

intersection (with computing devices and with one another)

n Goals of user-centered design

n Easy to learn
n Effective to use
n Enjoyable

n How do we do user-centered design

n Following design principles
n With real users – the design cycle

CSC2002S

35
+
Assignments
Design a customizable alphabet book to encourage fun and
personalized learning of letters and sounds.
n MDD1: Build a basic app
n Build a native Kotlin android app that will allow users to browse pictures of the letters of
the alphabet
n Run on Pixel 4A (Android 10)

n MDD2: Design more advanced features

n Design interactive prototype for more advanced features
n Justify your design using design principles and feedback from interviews

Melissa Densmore, UCT CSC2002S

https://www.twinkl.co.za/resources/grade-2-mathematics-foundation-phase-english-
south-africa-suid-afrika/measurement-mathematics-grade-2-foundation-phase-english-
south-africa-suid-afrika/time-measurement-mathematics-grade-2-foundation-phase-
english-south-africa-suid-afrika

36
+
A3 Marking Guide

Category Description Points

Demo Recorded demo of your working app 10 pts
Code Based on code review; messy or 5 pts
unannotated code to receive partial or no
credit
Following Conventions Design of app should follow android 15 pts
conventions, and best practices for
memory management and user experience

Melissa Densmore, UCT CSC2002S

37