►
Description
In this 16-minute citizen developer-focused demo, Kristine Kolodziejski introduces viewers to UI design starting with the “thumb zone” and illuminates other design tips for mobile apps that truly make the difference between awesome and not used. Accessibility, user experience, and appealing UI matter in mobile navigation. Graphical layouts and bottom nav bar with few buttons/links to most important information are key. Look at sample Apartment Manager mobile app and various mobile device navigation options in Power Apps design environment. This PnP Community demo is taken from the Microsoft Power Apps community call – June 2022, recorded on June 15, 2022.
Demo Presenter
• Kristine Kolodziejski (Computacenter) | @kristinekk94
Supporting materials
• Article - Building a beautiful Power Apps mobile navigation menu - HTML control (part 1) | https://www.kristinekolodziejski.com/blog/building-a-beautiful-power-apps-mobile-navigation-menu-html-controlpart-1
• Article - Building a beautiful Power Apps mobile navigation menu - Gallery (part 2) | https://www.kristinekolodziejski.com/blog/building-a-beautiful-power-apps-mobile-navigation-menu-gallery-part-2
• Web site and Blog | https://www.kristinekolodziejski.com/
• GitHub https://github.com/misskristine94
• Tool – Codepen | https://codepen.io/
• Tool – Dribbble | https://dribbble.com
Stay connected
• Twitter https://twitter.com/microsoft365dev
• Call attention to your great work by using #PowerAppsCC and #PnPWeekly on Twitter.
Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community Blog - https://aka.ms/m365pnp/blog
• Microsoft 365 Platform Community - https://aka.ms/m365/community
A
A
So
what
we're
going
to
talk
about
today
is
obviously
navigation
in
powerapps,
it's
a
very
hot
topic
right
now
and
then
and
generally
ui
and
ux
is
a
very
hot
topic
for
anyone
that
doesn't
know
me.
I'm
an
active
community
contributor.
You
might
have
seen
me
on
twitter
or
linkedin,
constantly
sharing
some
various
tips
and
tricks
on
how
to
kind
of
take
you
why
to
to
the
next
level.
A
Anyone
that
wants
to
connect
with
me.
This
is
the
qr
code
for
my
linkedin,
my
twitter,
all
of
my
socials
as
well,
and
my
github
repos.
If
you
want
to
get
some
free
components
that
will
surely
be
submitted
to
the
repository,
please
get
them
from
from
there.
So
let's
talk
about
the
mobile
navigation
first
and
why
it
actually
matters
now
in
the
ux
and
ui
world
we
have
what's
called
the
thumb
zone.
A
Now,
if
I
was
to
kind
of
talk
to
you
about
what
the
thumb
zone
is,
if
I
was
to
just
grab
my
phone,
the
samsung
needs
to
effectively
be
airy.
That's
easily
reachable,
and
can
everyone
see
my
thumbs
by
the
way
can
can
everyone
see
what
what
I've
got
on
my
screen
and
I'm
just
moving
to
to
the
next
slide,
so
the
thumbs
up
is
effectively
the
area
that
you
can
easily
reach,
with
your
thumb,
while
you're
navigating
across
the
application.
A
So
the
top
kind
of
bar
on
on
here
is
the
area
that's
very
easily,
reachable
without
having
to
kind
of
stretch
your
thumb,
then,
as
we
go
a
bit
further
up,
you'll
find
that
it's
quite
difficult
to
actually
be
able
to
reach
where,
if
you
get
to
the
very
top
it'll
be
pretty
impossible.
Now,
if
you're
anything
like
me,
I'm
a
very
lazy
person,
I
tend
to
kind
of
prop
my
phone
like
that
and
try
and
reach
the
top
of
the
screen
the
amount
of
times
I've
dropped.
My
mobile
phone.
A
I
can't
count
on
one
hand.
Unfortunately,
so
I've
had
to
have
the
screen
replaced
many
times.
So
what
you
want
to
make
sure
is
that
your
mobile
navigation
is
actually
on
the
bottom
here,
so
for
any
user,
that's
using
the
application
be
able
to
quickly
access
all
of
the
important
screens
in
your
application
directly
from
from
here.
So
why
does
mobile
navigation
actually
matter
now?
The
first
reason
why
it
matters
is
accessibility.
A
A
Now,
if
you
are
a
person,
that's
struggling
with
with,
let's
say,
motor
skills,
so
you're
having
to
kind
of
navigate
through
the
application
with
one
hand,
it's
going
to
become
very
difficult
for
a
user
to
actually
reach
that
cog
setting
and
then
try
and
get
to
to
that
point.
If
you
are
using
a
screen
reader
as
an
example,
the
screen
reader
will
not
even
pick
up
your
flyout
menu.
So
if
you
have
a
flyout
menu
that
will
become
visible
when
you
press
the
button,
the
screen
reader
will
not
actually
pick
it
up.
A
What
will
effectively
happen
is
the
screen.
Reader
will
read
everything,
that's
on
the
screen
and
then
the
moment
the
person
presses
the
button.
The
screen
reader
will
read
the
whole
screen
again
and
then
at
the
end
of
the
screen
reader.
He
will
then
talk
to
the
user
about
about
the
money
that
they
have
on
the
screen.
Now.
Another
set
of
users
that
might
be
affected
as
well
is
people
that
use
what's
called
assistive
touch.
A
So
I'm
not
sure
if
you've
ever
heard
of
that
a
lot
of
smartwatch
brands
allow
you
to
actually
navigate
through
a
mobile
phone
by
using
hand
gestures.
So
if
you
have
a
smart
watch,
you
are
able
to
do
this
to
navigate
three
application.
Now
I
don't
think
I
have
to
say
that
if
you
have
a
cog
setting
somewhere
on
the
top
of
your
screen
and
you're
having
to
navigate
three
applications
using
hand
gestures,
you
are
going
to
do
this
about
10
or
20
times
by
the
time
you
get
to
the
setting.
A
That
you
want
to
reach
now.
The
second
reason
why
it's
very
interlinked
with
the
first
one
is
around
tuesday
experience.
Now,
if
you're
a
user,
I
mean
we're
all
in
a
rush
always
busy.
We
want
to
be
able
to
do
something
with
an
application
within
seconds.
You
don't
want
to
have
to
navigate
to
a
menu,
go
to
a
sub
menu
and
then
have
to
try
and
navigate
through
your
screens.
You
want
to
be
able
to
open
your
application
and
have
some
kind
of
money
on
the
bottom.
A
So
if
you
want
to
submit
a
new
request,
if
you
want
to
see
your
basket,
if
you're
using
a
shopping
application,
you
want
to
be
able
to
just
click
on
the
button
on
your
screen.
Doesn't
matter
what
screen
you're
on
you
want
to
be
able
to
press
that
button
and
get
to
that
immediately
and
the
last
reason
I
know
it's
slightly
cliche,
I'm
kind
of
biased,
because
I'm
a
very
ux
ui
person.
If
your
application
looks
awesome,
your
users
will
love
it.
A
The
user
adoption
will
be
much
higher
as
well,
so
your
people
will
want
to
use
the
applications
in
the
future
as
well.
Now.
One
thing
that
I
hear
quite
often
is
christina:
I'm
not
a
designer.
I
don't
do
coding.
I
don't
know
where
to
start.
I
just
want
it
to
work.
One
thing
I
always
say
is
get
inspired.
If
you
don't
know
how
to
create
nice
looking
things
you
know,
they
still
they'll
still
hope
for
you.
I
I
promise
so
there's
three
kind
of
resources
that
I
always
recommend
to
kind
of
use.
A
The
first
one
is
codepen
io.
Now,
if
you've
worked
in
software
development
or
web
development,
you'll
be
very
familiar
with
codepen,
it
allows
you
to
see
how
different
developers
tackle
a
specific
problem,
whether
that's
a
website,
an
animation
whatever
that
might
be
and
actually
see
the
code
snippets
too.
So,
if
you
want
to
get
a
little
bit
inspired,
please
do
not
copy
someone's
work.
You
can
easily
see
how
someone
has
actually
tackled
that
problem
now.
The
second
website
is
called
dribble.com.
A
Drupal.Com
works
similarly
to
codepen.
So
it
allows
you
to
see
wireframes
of
websites
animations
and
all
of
that,
but
you
don't
actually
get
the
chance
to
see
the
code
snippet.
So
if
you
want
to
use
drupal,
please
be
aware
that
you
will
not
be
able
to
actually
see
what
what's
in
the
back
end,
and
the
third
kind
of
suggestion
I
always
have
is
just
take
your
mobile
and
see
what
you
like.
So
if
you
open
up
your
mobile,
I'm
not
sure
about
you.
A
A
So
without
any
further
ado,
let's
actually
crack
on
with
the
demo,
because
I
have
a
very
exciting
demo
to
show
you
so
what
I
have
done
for
today.
If
I
just
quickly
navigate
to
my
application,
there
we
go.
I
have
an
application
and
hopefully
you
can
all
see
the
the
application
itself.
It's
an
application
called
apartment
manager.
A
Now
this
is
an
application
that
I
demoed
at
the
scottish
summit
last
year
when
I'm
sorry
last
weekend,
it
wasn't
last
year
when
I
was
doing
an
accessibility
demo,
and
this
application
allows
you
to
do
things
like
changing
settings,
personal
settings,
changing
the
language
triggering
a
screen,
reader
change
the
theme
and
do
love
all
of
that.
So
the
kind
of
use
case
for
the
application
is
very
simple.
I've
recently
moved
houses
and
I
have
a
terrible
memory.
A
So
every
time
I
went
to
ikea
or
to
a
furniture
shop-
and
someone
asked
me
how
large
the
room
was,
I
would
forget
or
give
them
the
wrong
measurements
and
then
obviously
the
furniture
doesn't
fit
where,
where
it
should
fit.
So
I
thought
well
perfect
use
case
for
power
app.
Let's
build
an
app,
I
can
take
to
a
key
and
actually
show
the
people
what
I'm
looking
to
to
achieve.
So
the
application
allows
you
to
see
all
of
the
rooms
and
all
of
the
measurements
directly
from
here.
A
So
I'm
able
to
navigate
to
one
of
the
rooms,
see
what
I
have
purchased
already
take
one
of
the
boxes.
If
you
want
to
add
additional
things
that
I've
purchased
now,
if
someone
asked
me
what
the
layout
of
my
room
is
again,
I
am
very
terrible
at
describing
things
I
can
easily
toggle
that
to
map
view
and,
as
you
can
see,
I
can
see
the
whole
kind
of
place
in
the
floor
kind
of
way
and
I
can
easily
take
click
on
one
of
these.
A
Let's
say
we'll
choose
the
walk-in
wardrobe
in
here
and,
as
you
can
see,
I
can
see
exactly
what
I've
bought
what's
still
missing
in
there
as
well.
So
the
key
thing
that
I
want
to
obviously
want
you
to
pay
the
attention
to
is
the
bottom
navigation
menu.
So,
as
you
can
see,
we
have
a
very
kind
of
clear
indication
as
to
where
in
the
screen
I
currently
am
now
from
an
end
user
perspective.
A
If
I
can
even
navigate
to
the
home
screen
without
having
to
have
20
pop-up
menus,
that's
perfect
because
it
means
I
can
do
my
job
really
quickly
do
what
I
need
to
do
in
the
application
and
just
navigate
to
do
whatever
else.
I
need
to
do
so.
Let's
go
and
actually
show
you
how
this
is
built.
If
I
navigate
to
my
components
now
in
terms
of
how
the
actual
component
is
built,
it's
very
simple.
I
know
it
might
not
look
very
simple,
but
I
promise
it's
very
simple.
A
We
are
using
two
controls,
so
if
I
was
to
open
that
pop-up
in
there
we
have
one
control,
that's
the
html
text
and
the
other
one
is
the
gallery.
Now.
The
html
control
is
what
is
driving
the
design
from
the
back.
So
if
I
was
to
hide
the
menu
on
here,
if
we
just
send
that
to
invisible,
you'll
see
that
what
I
have
on
the
screen
is
just
a
very
simple
div
tag:
well,
actually,
two
diffs
on
the
screen.
A
So
if
I
was
to
just
open
the
code
view,
if
I
just
quickly
open
that
up
again,
that's
not
very
readable,
so
I
have
actually
prepared
vs
code
instead,
so
you
can
actually
see
what
we
have
in
here.
So,
as
you
can
see,
we
just
have
two
very
simple:
div
tags.
We
have
one
div
tag,
which
is
the
main
kind
of
navigation
menu
in
here.
So
if
I
just
quickly
pop
that
closed
and
then
we'll
open
this
code
again,
wherever
that
dissipates
to
nope
that's
disappeared,
perfect
exactly
what
we
need
to
do.
A
Let
me
just
open
that
up
again
open
that
in
there
so
you'll
see
that
we
have
a
very
simple
couple
of
disk
tags
with
with
just
some
very
simple
properties,
so
it
isn't
very
anything
kind
of
complicated.
It's
nothing
special
in
there,
just
something
very
basic,
but
that's
what's
giving
us
that
nice
kind
of
ui,
so
you
can
see
that
we
have
the
very
native
bar
on
the
bottom
here
again
very
simple:
div
tag,
it's
just
a
rectangle
with
some
nice
border
radius.
A
You
can
have
a
little
bit
of
nice
box
shadow
around,
so
it
just
gives
you
that
really
modern
kind
of
experience
that
you
will
see
on
in
a
native
application
and
then
the
second
part
of
that
is
obviously
our
menu.
So
if
I
was
to
turn
that
to
visible
the
menu
itself
is
very
simple,
if
I
was
to
just
navigate
to
the
actual
menu
items
which
we
have
in
a
component
and
we'll
go
to
many
items,
you
will
see
that
I
just
have
a
very
simple
table
with
three
columns.
A
The
first
column
is
the
menu
item.
This
is
what's
going
to
drive
the
kind
of
name,
so
if
you
wanted
to
add
the
label
as
to
what
screen
you're
on,
you
will
be
able
to
do
that
from
here
as
well.
Menu
screen
navigate.
So
this
is
the
screen
that
you
want
to
navigate
to
when
you
actually
press
the
button,
and
then
we
have
the
menu
logo
now
for
the
menu
logo.
I
am
using
an
svg,
which
is
why
it
looks
like
it's
a
lot
of
code.
It
isn't
a
lot
of
code.
I
promise.
A
If
you
want
to
learn
more
about
svgs,
I
will.
I
will
share
some
resources
as
well.
So
that's
what
we
have
in
here
now
that
we've
kind
of
put
all
of
that
resource
in
here.
We
just
need
to
derive
a
lot
of
the
colors
and
then
how
the
behavior
works.
So
if
I
was
to
navigate
to
let's
say
menu
and
we'll
go
to
the
image
as
an
example,
what
you
will
see
here
is
that
the
color
of
my
svg,
we
have
the
property
here
path.
A
Fill
will
be
driven
by
whether
the
item
in
the
gallery
has
been
selected.
So
if,
if
I
have
selected
the
gallery
item
and
the
screen
equals
the
screen,
I
am
currently
on
the
color
of
that
will
be
the
I
can
color
hex,
which
is
a
custom
property
that
I've
added
to
the
components
for
any
other
kind
of
situation.
We
will
have
the
light
gray
color
that
you
saw
in
there.
A
So
if
I
was
to
just
navigate
back
in
here
and
we'll
go
to
our
application,
let
me
just
zoom
out
you
can
see
that
this
is
what
we're
doing
so
for
for
when
the
screen
is
actually
active.
The
color
of
the
svg
will
be
blue,
any
other
situation.
We
just
want
that
to
be
grey,
so
we
don't
care
what
what
color
we'll
have
in
there
now.
This
is
a
very
simple
menu.
A
I'm
not
going
to
lie
that
it's
a
very
complex
menu
might
look
much
nicer
than
it
actually
is,
but
there's
actually
a
few
more
demos
that
I'd
like
to
show
you.
So,
as
you
can
see,
on
the
left
hand,
side,
I've
gone
ahead
and
actually
built
not
one
but
eight
different
menus
to
kind
of
show
you
what
you
can
actually
achieve
within
within
here.
So
if
I
navigate
to
see
screens
and
then
go
to
demo
and
I'll
quickly,
zoom
out,
these
are
just
a
couple
of
navigation
lines
that
I
have
built.
A
So
the
top
one,
as
you
can
see,
is
the
one
that
I've
just
demoed
to
you.
So
it's
a
very
simple
one
that
just
a
gallery
overlaid
over
html
control.
The
next
one
is
the
same
gallery,
but
for
the
background
property
for
html
control,
we
are
just
using
lineal
gradients.
So
I'm
not
sure
if
you
can
actually
see
if
I
was
to
just
quickly
zoom
in
you
can
see.
The
color
goes
from
lighter
blue
to
darker
blue
and
that's
all
we're
doing
again.
A
Most
of
the
time
when
you
go
to
to
a
kind
of
mobile
application,
where
you
can
do
do
a
little
bit
of
shopping,
whether
that's
clothes
shopping
furniture
shopping,
you
always
have
some
kind
of
basket
button
at
the
front
and
that's
because,
as
a
user,
this
is
the
key
thing.
So
the
company
building
the
application,
obviously
wants
you
to
to
have
that
button
at
the
front.
So
you
you
make
sure
you
go
to
checkout,
but
from
an
engineer's
perspective.
A
You
know
that
this
is
the
key
button.
So
if
you
want
to
check
out
so
you
know
that
you
just
click
one
button,
you
don't
have
to
click
on
20
buttons
and
you
go
straight
there
again.
We
have
some
buttons
at
the
front.
So,
as
you
can
see,
this
is
giving
us
quite
nice
experience.
I
know
exactly
what
what
I'm
doing
now
the
next
one
is
a
little
bit
more
colorful
again
I
I
saw
an
application
that
had
a
similar
menu
and
thought
it
would
be
a
perfect
kind
of
use
case
for
for
powerapps.
A
So
for
this
menu,
as
you
can
see,
we
have
the
same
principle,
so
we
we
obviously
have
colorful
items
in
here.
The
principle
is
exactly
the
same
if
I
was
to
just
navigate
into
here,
and
I
think
it
was
a
menu
number
there
we
go.
The
principle
is
exactly
the
same,
so
we
still
have
the
menu
items
in
here.
So
we
have
that
my
gallery
on
top
and
then
we
have
the
html
text
now
if
I
was
to
open
the
menu.
A
The
only
difference
that
we
have
in
here
is
that
I
have
another
div
tag
within
here
and
that
if
tech
will
dictate
the
text
in
here
and
then
we'll
dictate
the
color.
That's
all
that's
changed.
Apart
from
that,
we
are
just
using
the
low
code
properties
that
we
can
change
within
the
application
without
having
to
use
any
code
to
customize
that
as
well.
A
Now
the
next
kind
of
menu
is
very
similar
to
this
one.
The
only
difference
is
that
you
can
actually
pop
out
to
the
top
rather
than
pop
out
to
kind
of
sideways.
So,
as
you
can
see,
if
I
was
to
just
navigate,
we
have
different
colors
and
you
can
see
that
that's
kind
of
popping
up
to
the
top.
Now
the
next
one.
As
you
can
see
it's
a
little
bit
extra.
A
I
just
want
to
show
you
kind
of
what
you
can
do
with
with
lineal
gradient
and
then
a
bit
of
box
shadow
as
well
very
over
the
top.
I
can't
see
a
use
case
for
using
that,
but
it
looks
cool.
So
I
thought
I'd
include
that
in
here
and
then
the
last
one
is
my
favorite.
Now,
I'm
not
sure
if
you
can
actually
see
on
the
screen,
but
we
have
a
little
bit
of
animation
in
there.
Hopefully
you
can.
You
can
see
that.
A
So
again
the
principle
is
exactly
the
same
and
I'll
show
you
in
a
second.
How
that's
built
all
we're
doing
is
we're
using
again
the
html
control
and
we're
using
the
gallery
items
on
in
here.
But
the
only
slight
difference
is
that
if
I
navigate
to
our
image,
which
is
where
the
svg
code
is
contained,
rather
than
use
timer
controls
and
do
all
of
that
to
kind
of
create
some
kind
of
animation,
which
will
then
obviously
kind
of
affect
the
loading
time
of
the
application,
because
you're
adding
additional
controls.
A
And
if
I
select
this
item,
I
want
this
to
start
moving
and
then,
if
it
isn't,
I
just
want
it
to
stay
static
and
that's
all
we're
doing
just
a
very
simple
code,
snippets
that
I've
added
in
here
and
that
animation
will
be
there
persistently.
So
if
I
was
to
click
on
one
of
these
you'll
see
that
we
have
that
navigating
around
there.
So
again,
that's
that's
pretty
much
for
my
for
my
demo.
A
So,
whether
you
are
a
developer
or
not
a
developer,
I
am
doing
a
lot
of
tips
on
how
to
actually
build
it
from
scratch
and
equally,
if
you
don't
want
to
learn
how
to
build
it,
because
you
don't
have
time
or
you're
not
keen
on
using
code,
these
will
surely
be
available
on
my
github
as
well,
so
I'll
make
it
available
for
for
everyone
to
use
any
questions
at
all.
Anyone
would
like
to
to
find
out
anything
anything
more.
B
B
Nobody
will
use
it
right
and
so
you've
shown
how
powerful
that
is
today,
really
fantastic,
we'll
get
all
the
blog
information
and
the
sample
information
into
the
the
blog
post
for
this
call
as
well,
and
we
will
ensure
that
everybody
has
access,
and
maybe
we
can
work
with
christine
to
get
a
version
of
this
up
into
the
sample
gallery
as
well,
because
it's
so
powerful,
so
that
would
be
really
fantastic
and
and
she'll
get
a
badge
for
that
awesome.
Thank
you.