ID: Apps Pod 01: What Are Apps?

Summary

This interactive design lecture introduces the concept of mobile apps, distinguishing between web, hybrid, and native apps. It emphasizes the importance of native apps for optimal user experience and performance. The lecture also covers app design considerations, such as user interface expectations, input methods, high-resolution displays, time constraints, limited screen real estate, context of use, and the necessity of wireframing in app development.

Takeaways

• 📱 An app is a piece of software designed for small devices like phones and tablets.
• 🌐 There are three types of apps: web apps (HTML5), hybrid apps, and native apps.
• 🌀 Web apps are responsive web designs that scale to small screens and are delivered over the internet through a browser.
• 🔧 Hybrid apps combine elements of native and web apps, embedding a mobile website within a native app framework.
• 🏭 Native apps are coded specifically for a platform (iOS or Android) and optimize device capabilities for a superior user experience.
• 📈 Research shows that mobile experience significantly impacts how users interact with a brand.
• 🎯 Native apps are generally preferred for their robust performance and user experience compared to HTML5 apps.
• 📊 The most popular app categories are games, business, education, and utilities.
• 🔢 On average, users have about 80 apps installed and use 9 daily, interacting with around 30 apps monthly.
• 🛠️ Key differences in app design include user expectations for familiar UI controls, primary input method being touch, and the need for high-resolution design.
• ⏰ Time is short for mobile users, so app interfaces must be quick and easy to navigate.

Q & A

What is the primary difference between a web app and a native app?

A web app is a responsive design delivered over the internet through a browser interface, similar to a website, while a native app is coded specifically for a platform like iOS or Android and offers a more optimized and engaging user experience with faster load times and access to device capabilities.

What are the three types of applications for mobile devices mentioned in the script?

The three types of applications for mobile devices mentioned are web apps or HTML5, hybrid apps, and native apps.

Why might a hybrid app be considered just a 'mobile site wrapped in sheep's clothing'?

A hybrid app embeds a mobile website inside a native app framework, allowing development using web technologies. Despite being downloadable from an app store, it essentially functions like an HTML5 app, inheriting the same user experience issues as web apps.

What is the significance of knowing the type of application (HTML5, hybrid, or native) when designing an app?

Knowing the type of application is significant because it dictates the development process, user experience, performance, and the extent to which the app can utilize device-specific features.

How does the user experience differ between HTML5 and native apps?

HTML5 apps often provide an inferior user experience with slower performance, while native apps offer a superior experience with faster load times, robust performance, and better integration with device features.

What is the average number of apps a person uses daily according to the script?

The average person uses nine mobile apps on a daily basis.

What are the most popular app categories in the Apple App Store as of the data mentioned in the script?

The most popular app categories in the Apple App Store are games, business, education, and utilities.

Why is it important to consider the context in which users will interact with an app?

Considering the context is important because users may interact with apps in various environments, such as outdoors, in transit, or at home. Design considerations should account for factors like visibility in bright sunlight or ease of navigation while on the move.

What are some of the unique challenges faced by app designers compared to web designers?

App designers face unique challenges such as designing for touch input instead of mouse and keyboard, dealing with high-resolution displays, optimizing for short usage sessions, managing limited screen real estate, and considering the varied contexts in which apps are used.

Why is wireframing considered even more essential in app design than in web design?

Wireframing is essential in app design because it helps plan the interface layout efficiently before moving on to more detailed mockups. The production process for apps is often quicker, making the ability to plan and iterate on wireframes a critical skill.

What is the role of high-resolution displays in app design?

High-resolution displays present a challenge for designers as they require sharp and detailed graphics. Designers must consider the resolution of various devices when creating app interfaces to ensure compatibility and clarity across different screen sizes and resolutions.

Outlines

00:00

📱 Introduction to App Design

This section introduces the course on interactive design for apps. It discusses what an app is, defining it as a software application designed for small devices like phones or tablets. The instructor outlines three types of applications: web apps, hybrid apps, and native apps. Web apps are responsive web designs that scale to fit small screens and are delivered through a browser. Hybrid apps combine elements of web and native apps, embedding a mobile website within a native app framework. Native apps are coded specifically for a platform like iOS or Android. The debate between HTML5 and native apps is mentioned, highlighting the strengths and weaknesses of each, with a focus on the importance of understanding the technology behind app development.

05:01

🌐 The App Landscape and Native App Advantages

This paragraph delves into the app landscape, emphasizing the impact of mobile experience on brand interaction. It discusses the importance of native apps over HTML5 due to superior user experience and performance. The instructor argues for the development of native apps, citing studies that show poor app experiences can deter users from a company's products or services. The pros and cons of HTML5 and hybrid apps are contrasted with the advantages of native apps, such as smooth operation, engagement, optimized device capabilities, faster load times, robust performance, better brand image, and superior security. The discussion also touches on the higher costs associated with native app development due to the need for platform-specific development.

10:01

🎮 Popular App Categories and User Behavior

The speaker explores the most popular app categories in the Apple App Store, such as games, business, education, and utilities. It provides insights into the number of apps people typically use, with an average of 80 apps installed and nine used daily. The paragraph also categorizes apps into six basic genres: utilities, entertainment, games, news, productivity, and social networking. The instructor encourages students to consider the category and genre of the app they will develop, emphasizing the importance of understanding app purposes and user expectations.

15:01

🖌️ App Design Considerations

This section focuses on the specific considerations for app design compared to web design. It highlights that users expect familiar user interface controls in apps and that designers should optimize for touch input rather than mouse and keyboard. The importance of high-resolution displays, the short time users spend in apps, limited screen real estate, and the varied contexts in which apps are used are discussed. The paragraph stresses the need for wireframing in app design and the rapid production process for apps, urging designers to plan carefully and consider user context and device capabilities in their designs.

20:02

📝 Conclusion and Course Preview

The final paragraph wraps up the introduction by summarizing the different types of app development and the categories apps fall into. It provides a brief overview of the differences in designing for apps versus websites and encourages students to think about the specific environments where their app will be used. The instructor expresses hope that students now have a better understanding of app design and looks forward to the semester's class sessions on the subject.

Keywords

💡App

An 'App' is short for 'Application,' which refers to a piece of software designed to run on mobile devices like smartphones or tablets. In the context of the video, apps are distinguished from traditional web applications by their specific design considerations for small screens and touch interfaces. The video discusses different types of apps, including web apps, hybrid apps, and native apps, emphasizing the importance of understanding these distinctions for app design.

💡Web App

A 'Web App' is a type of application that is accessed via a web browser over the internet. It is designed to be responsive, meaning it scales to fit different screen sizes, including mobile devices. The video mentions that web apps are stored on a remote server and are delivered through a browser interface on the phone, like a regular website but optimized for mobile use.

💡Hybrid App

A 'Hybrid App' combines elements of both web and native apps. It embeds a mobile website within a native app framework, allowing for development using web technologies. The video explains that while hybrid apps can be downloaded from an app store, they essentially function like web apps, with the HTML5 content wrapped in a native container.

💡Native App

A 'Native App' is specifically coded for a particular platform, such as iOS or Android, and takes full advantage of the device's capabilities. The video highlights native apps as offering a superior user experience with optimized performance and design tailored to the device's interface. Native apps are contrasted with web apps, emphasizing their robustness and the importance of considering native development for a better user experience.

💡Responsive Design

Responsive design refers to the practice of designing web apps to scale and adapt to different screen sizes and devices. The video discusses how web apps use responsive design to ensure a good user experience on small screens, such as those on mobile phones, by adjusting the layout and content presentation accordingly.

💡User Interface (UI)

User Interface (UI) design focuses on the look and feel of an app, including how users interact with it. The video stresses the importance of familiar UI controls in app design, as users expect apps to behave in predictable ways. It also mentions the need to design for touch inputs rather than mouse and keyboard interactions, which is a key difference from web design.

💡User Experience (UX)

User Experience (UX) encompasses all aspects of how users interact with an app, including its usability, accessibility, and overall satisfaction. The video emphasizes the superior UX of native apps compared to web apps, highlighting factors like performance, load times, and the optimization of device capabilities as reasons for the better experience.

💡High-Resolution Displays

High-resolution displays are screens with a higher pixel density, resulting in sharper images and text. The video points out the increasing prevalence of high-resolution screens in mobile devices and the challenge this presents for designers to ensure that their app's visuals are crisp and clear across different devices.

💡Wireframing

Wireframing is an initial stage of the UI design process where a basic layout of an app's screens and elements is sketched out. The video stresses that wireframing is essential for app design, as it helps plan the app's structure and user flow before moving on to more detailed design stages. It's particularly crucial given the quick production process for apps.

💡Context of Use

The 'Context of Use' refers to the various situations and environments in which users engage with an app. The video discusses the importance of considering the context of use in app design, as users may interact with apps in diverse settings such as while commuting, at work, or at home. Designers must account for these different contexts to create an app that is usable and accessible in any situation.

💡App Categories

App categories are the classifications used in app stores to organize and categorize different types of apps. The video lists popular categories such as games, business, education, and utilities, highlighting the importance for designers to understand the genre of their app and how it fits within the broader app ecosystem.

Highlights

An app is a piece of software designed for small devices like phones and tablets.

There are three types of applications: web apps, hybrid apps, and native apps.

Web apps are responsive web designs that scale to small screens and are stored on a remote server.

Hybrid apps combine elements of native and web apps, embedding a mobile website inside a native app.

Native apps are coded specifically for a platform like iOS or Android and optimized for device capabilities.

Understanding the technology or production pathway for app development is crucial for designers.

The debate between HTML5 and native apps has been ongoing, with each having strengths and weaknesses.

HTML5 is easier to develop and update, but native apps offer a superior user experience.

Native apps are more engaging and have faster load times compared to web apps.

Research shows that a poor app experience can negatively impact a brand's perception.

The most popular app categories are games, business, education, and utilities.

On average, users have about 80 apps installed and use nine mobile apps daily.

Apps can be categorized into six basic types: utilities, entertainment, games, news, productivity, and social networking.

Designing for apps requires considering the primary input method, which is the user's finger, not a mouse or keyboard.

High-resolution displays are common on mobile devices, presenting a challenge for designers.

Mobile devices are used in short spurts, so app interfaces need to be fast and efficient.

Limited screen real estate on mobile devices requires careful consideration of button and toolbar placement.

Context is crucial in app design; designers must consider where users will use the app.

Wireframing is essential for app design, even more so than for web design.

Transcripts

hi and welcome to interactive design

apps um for this first part we'll be

looking at what an app actually is and a

general overview of what you as

designers need to know when moving from

web to app design what the specific

things are that we need to pay attention

to when designing apps specifically not

just websites so let's just start with

the three types of production

technologies or ways to view

what an app actually is

um but before that let's just answer

that basic question is of what is an app

app is just short for applications so

it's a piece of software

that runs on your phone or tablet um and

it is designed

for

small devices

so app is short for application

now there's three types of applications

that we can see for the mobile phone

there's these

uh you've probably encountered them you

may not be aware that you have um and

all three of these target mobile devices

says it's the web app or html5

there's hybrid apps and there's native

apps so let's just briefly go through

what those three things actually mean

okay so the first one web or html5

is a responsive web design so it is

something that is designed you know from

the get go as a website but

it happens to put out a responsive

design that scales to a small screen

a web app is stored on a remote server

so it's like a general generally the

same it is a website and it's delivered

over the internet through a browser

interface on your phone

so when you're developing anything in

html5 it will have a responsive version

hopefully that looks good on a small

screen anyone using wordpress this

semester or last semester at any time in

your program you'll know that a lot of

the themes are responsive um html5 sites

that look good they'll scale down to a

small screen experience as well so that

is an html5 delivered thing through a

browser on your phone

now this next type um hybrid

um has elements of both native and web

apps

it's often mentioned in the context of

mobile

phones um they embed a mobile website in

inside a native app so there's like a

framework around your app that delivers

um the html5 within there it allows

development using web technologies

rather than app technologies um and so

that people working on it can deliver

via html but it sits within a framework

of

a um a web app an app container

okay so it's got certain

advantages there that you could see the

app in the app store and download it but

you know in essence it's really just

opening up a little container that has

the html5 files in it

now our third type

is native

native apps

and in terms of native obviously it's

coded in whatever

programming language it needs to be for

your your platform

um either ios or android and it's it's

coded just as an app now why is this

important why do you need to know this i

think that it is good at for any app

designer to know what platform or what

technology or production pathway in fact

that you are going through to develop

your app now let's have a little look

or

talk for talk i'll just talk at you for

a moment about the difference between

html5

and native

and i guess this debate has been going

on for a long time in app development or

at design

particularly since 2012

there's lots of strengths and weaknesses

for both delivery platforms

html5

is

kind of easy to develop in because most

web designers

cope with html5 it's fairly easy to

update there's no special programming

required

um you will have the skills to make a

website you can then make therefore make

an app or a responsive design for your

uh phone

customers or clients

and then native apps were always seen as

too difficult to program

um

[Music]

and you need to code it differently so

when you're developing or designing your

project you need to have a your hat on

for html5 to do it but then if you're

going to native you really can

pay attention to what is specific about

apps and how to

i guess use the latest features in the

user

interface for

whatever platform you're designing for

and so you

you know you can code it specifically to

pay attention to what phones do as

opposed to monitors for browsing the web

um

so

i guess that the debate

is ongoing

um

and you know when you get clients in the

future you will

i think hopefully

persuade your clients that perhaps a

native app is the way to go which is why

in this

subject apps we are designing

with the mindset that we're designing a

native app

okay

so now that we've got that kind of out

of the way you have an idea that hey

we've got three ways of doing it web app

html5

hybrid or native and we're going to be

pretending not pretending we're going to

be

having the mindset that we're developing

something native for our phones this

semester let's talk a little bit more

let's

flip a little bit more to you know

a bit more about the app landscape

um

research

shows that mobile experience has a huge

impact on

how users interact with a brand

um

recent oracle studies has found that

more than half of those surveys

say that a poor app experience puts them

off for companies product or services

again another rationale for heading

towards the native

end of things rather than just an html5

which is a

sometimes frustrating user experience on

your phone

okay

so i i'll leave you with that link to go

through a little bit more about

millennials but let's flip back again to

html5

um

so why do native apps stand out from

html5 what is it about their design

to answer this let's look at some of the

pros and cons of each and look at some

of the differences between the dominant

mobile strategies currently playing in

enterprises more generally

okay

so the pros would be that for html5

that's quick that's great for using

existing content

it only needs to be built once and

therefore it's usable on every device

but the cons are that there's a

inferior user experience

of your app um the performance is

inferior

and we're currently living in an app

world

um

people generally perform

prefer something to operate nicely on

their device

and html5 often doesn't

deliver that

okay what about hybrid you might ask

um

[Music]

it does bridge the gap but it's

essentially just a mobile site wrapped

in sheep's clothing i would say all of

the user experience issues outlined in

html5 that we've just been through still

apply

except that you can download it from

the app store or marketplace

so they have this exact same function as

an html5 so there's nothing unique about

those at all

okay

all right so

so i'm hopefully convincing you that a

native app is the way to go

um anecdotally mark zuckerberg you know

facebook ceo

has

has lamented the fact that he bettered

on html5 as a good way to deliver apps

and he's sort of retracted that and

you'll notice that all the facebook

uh a lot of the facebook um thinking

goes into developing the specific

features for the app first and then they

think about the website web delivered

ones later

so hopefully that's kind of cleared up

the delivery technologies for you from

html5 hybrid and to native apps

okay

so natives pros are that it's smooth it

can be engaging all of the device

capabilities are optimized when you're

doing a native app there's faster load

time compared to web apps it's robust

performance in online or offline mode

you can discover it better it's got a

better brand image

it's got superior security as relating

to html5

um

but the con is that it requires

development for each mobile platform and

the cost involved there so hopefully

that gives you a bit of an overview of

that

debate so just finally on that

we can see

my little chart here the user experience

improves

as you go towards developing a native

app

but the cost does go up for companies

because they'll need to develop two

properties the web one and the app one

separately

okay

so now that we've covered that let's

have a little look at

what type of apps are out there

currently what are the most popular ones

what can we expect to see

okay so i'm just covering

ios for the moment the most popular

apple app store categories as of this

year um by share available apps and we

can see that games business education

and utilities um feature high up in

there one would think oh yeah social

media but no um in terms of the number

of apps it's not in terms of use but the

number

or variety of apps available games wins

out by quite a strong margin there

business apps are the next big category

for

the amount of them out there or amount

of different ones and then education

utilities lifestyle food and drink

shopping health and fitness productivity

etc now you might go sarah why are you

showing me this um because in this

subject you'll be developing your app

and i think it's great to have an idea

of

you know what category your app's going

to fit in and what are the popular

categories for app development or app

design

okay so how many apps do we actually use

um

and in this is 2022 data

on average all of you will have probably

about 80 apps installed on your phone

and this is a

international statistic here um

you can also see that

175 billion apps are downloaded yearly

so there's apps there's an app for

everything as we know and the the

average person uses nine mobile apps on

a daily basis and interacts with about

30 different apps every month so you

might want to take a look at your phone

and kind of go oh do i really have that

80 apps um

and have it see how you compare with

like an average

sort of mobile user

okay

so

what sort of genres do apps fit into we

we saw some of them just a moment ago

with the most popular app categories but

we can see that we can reduce the type

or the genre to about six six basic

types as utilities or things that help

you do things or tools there's

entertainment games news productivity

and there's the social networking ones

so they're the main categories

for um for apps or thinking about the

genres so when you're considering the

direction for the app that you're

developing this semester please also

think about what category it fits into

whatever the app whether

you know and as a mobile developer you

need to understand what the purpose of

the app is and what genre it's generally

fitting in

um

so that's the reason for this rationale

for that genre overview

so

as designers um we need to know what

what we need to know about app design

what do you need to know now that you

are you know a bit about web design

you've been through idm

but what is specific to

app development or design that may not

be covered in a

web experience or thinking about web

design experiences

so

for those familiar with that let's just

go through a little bit of a list

number one users expect um

you know to be able to use familiar user

interface controls when they're on an

app

um

and we can see here a little screen grab

of ios ios 16 which is coming up

people expect that you know things are

even across that there's the same design

paradigm is being used across apps um

just as a vernacular approach to user

interface design on the web um the same

is true for app design so people expect

them or your users will expect them to

behave

like an app

while there's nothing to stop you

creating an entirely fresh new interface

design paradigm

there's a pretty good reason not to

we want people not to have to think

about the user interface controls that

they're already familiar with

and it's you know if we don't mess with

them uh it means that your user will

immediately

feel at home using your app

um there's many libraries on the web

that automatically generate user

interface elements to match

you know particular systems default um

and we will go through some of these

or kits as we go through our design this

semester

okay so number one use expect familiar

app design interface

strategies

number two

what's different from the web

you might be saying sound obvious but

you're designing when you're designing

apps the primary method of input is not

the mouse

or the keyboard but it's your finger so

gestures um

mean that you'll be creating mouth you

know you need to forget about mouse over

effects and instead consider how you can

provide a meaningful user experience

with appropriate feedback and sign

posting when your content is being

manipulated

and sometimes obscured with a finger or

fingers so you need to keep that in mind

a common mistake made by web designers

to rely on a mouse over to spawn a

sub-menu

no it's going to be a touch

so while mobile browsers take account of

it it's better to design in such a way

that your interface is optimized for

touch and that means a different way of

thinking about your menus for example

number three

high-res is taking over

and i've just put some current res sizes

there

we can see we can go up to 926 by 428

um and they look just continue to

increase

um

it makes everything appear sharp as we

know so high resolution displays

are common on any platform

and they present an interesting

challenge for you guys as designers um

you need to consider

the resolution of your device when

you're doing your design

um and you need to account for it so if

you're designing for a you know iphone

se second gen um or even older phones

it's going to be very different to what

you need to design or keep in mind for

for the larger screens

so high-res is taking over next one

time is short okay what does that mean

one of the characteristics of mobile

devices that they tend to be used in

short spurts

we can see people use them

instead of sitting down in front of a

computer or a screen

they want to quickly get things that

they're looking for or whatever service

or functionality you have there it has

to be fast hence this sort of sticking

to

um

familiar user interface principles

so for this reason it's essential to

consider every element of your interface

design and presentation to make sure

that you're providing the right

information

and

you know fairly limited options for each

screen so your user can navigate very

quickly

there's no complex navigational routes

in an app

it has to be easy to understand as a

structure

and it has to be clear about how people

can find what they're looking for and

where to find it

so i mean this should apply to web

design too but it's it's amplified in

app development that time is more

compressed than it would be people will

spend time you know

filtering around a website but they will

not on your app

so time is short number five

the real estate is really tiny we all

know that

so don't place buttons or toolbar bars

in the way at the top of the screen as

you normally would as a website there's

no sort of point putting things in the

header because people will obscure the

screen as they go to navigate

apps are usually seen on small screens

there's limited real estate

you have to take into account the

hardware when designing an app interface

how difficult will it be to tap a button

you know what size do they need to be

for fingers

there's a minimum size for that which

we'll go through in class

it's common to put you know easily

navigated things at the bottom because

you're not going to secure the screen as

you're using your hands to navigate so

obvious things like that um

okay so that's number five as a

constraint for

mobile apps as opposed to websites

number six context is everything now

what do i mean by this

when you're developing an app you have

to think about where

your users are going to use it you know

if they're using a website it might be

at home or at work it's going to be on a

laptop somewhere it's more likely to be

at home or in the work office

although laptops are mobile

but your your app users will be taking

their mobile phones everywhere they

might be in the supermarket they might

be having dinner they might be on the

couch they might be out waiting for a

bus

wherever they are you'll need to think

about the context of use as part of your

design considerations

so say for example you were doing a

fishing app which you might have last

semester if they're out in bright

sunlight you're going to make very bold

text and you're going to make it very

easy to navigate

because you know that

they won't be able to see the app

particularly well you won't make small

text in that

context so think about context is

everything when you're developing your

app so you do need to locate your app in

a specific or in an or know what the

specific environments are that your

users will encounter your app

okay next one eight

uh wireframe is always essential but

it's even more so for apps before you

mock up any

anything else

when wireframing is

is king here

even before you get to mock up your

buttons craft your typography choose

your images i'm going to be very keen to

get you to

wireframe very carefully um

particularly as the

production

process for apps is quite quick and

we'll talk about that in another pod

but planning

and being able to plan with wireframes

very very quickly is a key skill

in

app design

so

lastly just to remind you we've been

through

um

the different types of app development

so whether it's an html or a responsive

design or if it's native and hopefully

i'll convince you that native is

probably going to be the way to go

um you can also at the end of this now

think through what the app categories

are and you know know that there's

billions of apps out there

we've done a basic introduction to some

of the differences for designers with

working on what apps are you know

designing apps relative to websites

um and hopefully you have a bit of an

understanding of this domain that we're

moving into this semester app design so

thanks for listening i'll keep that

short and i will see you in class

thanks bye