ID: Apps Pod 01: What Are Apps?
Summary
TLDRThis 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
๐ฑ 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.
๐ 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.
๐ฎ 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.
๐๏ธ 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.
๐ 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.
Mindmap
Keywords
๐กApp
๐กWeb App
๐กHybrid App
๐กNative App
๐กResponsive Design
๐กUser Interface (UI)
๐กUser Experience (UX)
๐กHigh-Resolution Displays
๐กWireframing
๐กContext of Use
๐กApp Categories
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
5.0 / 5 (0 votes)