Guc 1529 62 40814 2024-03-11T13 21 22

APPLIED SCIENCES
AND ARTS GUC ‫اﻟﺠـﺎﻣﻌــــﺔ اﻷﻟﻤﺎﻧﻴــــﺔ ﺑـﺎﻟﻘﺎﻫــــﺮة‬

GERMAN UNIVERSITY IN CAIRO
06 PROTOTYPING, IA AND UI ELEMENTS
ENHANCING
A GOV-TO-CITIZEN
SERVICE WITH
A MOBILE APP
Interaction Design I, Spring semester 2024
Sally Skerrett Mai Sedkey Peter Mohr

sally.skerrett@guc.edu.eg mai.sedkey@guc.edu.eg peter.mohr@guc.edu.eg
Lise Fakhri Mirna Andrawes Farah Khaled Adapted from the original
lise.fakhri@guc.edu.eg mirna.maged@guc.edu.eg farah.khaled-kamaly@guc.edu.eg lectures of Jochen Braun
PROTOTYPING SALLY SKERRETT
SALLY.SKERRETT@GUC.EDU.EG
AGENDA
—Information Architecture
—Prototyping
—iOS + Android UI elements + Icons
—Week 6 Task
—Week 6 Figma Task
—Midterm Info
—Course Overview + Grading
PROCESS SALLY SKERRETT
EXPLORE
RESEARCH Understand people, business, content
DEFINE
USER EXPERIENCE Define the scope/problem/journey
IDEATE
USER EXPERIENCE Concept and Scenario Design
PROTOTYPE
UX/USABILITY Testing the interaction
DESIGN
UX/USER INTERFACE Visualise, transitions
DELIVER
HIGH FIDELITY PROTOTYPE Present, document
INFORMATION ARCHITECTURE SALLY SKERRETT
Each screen view works in a sequence to achieve a certain goal

within your app
ESSENTIAL INFORMATION NAVIGATION TIPS SALLY SKERRETT
— Always provide a clear path. People must know where

they are in app and how to get to their next destination.
— Design an information structure that makes it fast and

easy to get to content. Minimize number of taps, swipes,
and screens.
— Use touch gestures to create fluidity. Make it easy to

move through your interface with minimum friction. For
example, you could let people swipe from the side of the
screen to return to the previous screen.
— Use standard navigation components. Users are already

familiar with these and will intuitively know how to get
around your app.
— Use a navigation bar to traverse a hierarchy of data. Add

the page title, and a back button to make it easy to return to
the previous location.
— Use a tab bar to present peer categories of content or

functionality. To easily switch between categories,
regardless of the current location
— Use a page control when you have multiple pages of the

same type of content. Add dots at the bottom of the
screen to indicate no. of pages, you can use this in your https://developer.apple.com/design/
human-interface-guidelines/ios/
onboarding pages (app walkthrough) app-architecture/navigation/
HIERARCHICAL NAVIGATION SALLY SKERRETT
Make one choice per screen until you reach a destination. To

go to another destination, you must retrace your steps or start
over from the beginning and make different choices. Settings
and Mail use this navigation style.
https://developer.apple.com/design/
app-architecture/navigation/
FLAT NAVIGATION SALLY SKERRETT
Switch between multiple content categories. Music

and App Store use this navigation style.
CONTENT/EXPERIENCE-DRIVEN NAVIGATION SALLY SKERRETT
Move freely through content, or the content itself

defines the navigation. Games, books, and other
immersive apps generally use this navigation style.
COMMON NAVIGATION PATTERN SALLY SKERRETT
A common app navigation pattern involves

searching for content. A user might first choose a
large category like sports, then use a filter if
required to narrow down the search to ball
sports, then choose football which loads a
content page with details about football.
Try to notice navigation patterns in the mobile Navigation 1:

apps you use. Sport
Navigation 2:
Ball sports
Content view:
Football
PAPER PROTOTYPING SALLY SKERRETT
This is the fastest and cheapest way to test a concept.

Wireframes contain clear functions, content and their positions.
They work in a sequence to achieve a certain goal within your app

They can be in black and white or with limited color.

Use color to highlight navigational elements or action buttons.

PAPER + DIGITAL PROTOTYPING SALLY SKERRETT
USE UI + WIREFRAME KITS

— Use a good quality wireframe kit, see Android: from material
links opposite from the figma Material 2
https://www.figma.com/community/file/778763161265841481
community
— If using a different kit please share with Material 3
instructor to check quality
— It is possible with convertify figma Material Design Time and Date Pickers Kit
plugin to convert Adobe XD wireframe
kits Material Dark Theme Design Kit
— In Adobe XD click: File>Get UI Kits> https://www.figma.com/community/file/787036571667088922
— Apple iOS here Carbon (unofficial)

— Material Design here Carbon UI Kit for Figma
— Wireframes here https://www.figma.com/community/file/874592104192380079
IOS
iOS 15 UI Kit for Figma
DEVELOPER+DESIGNER FRAMEWORKS SALLY SKERRETT
ANDROID PRINCIPLES
Google has developed a framework for developing apps and products for
Android devices called Material. Material is a design system – backed by
open-source code – that helps teams build high-quality digital
experiences.
Material documentation contains:

— Material Design Guidelines
— Components
— Icons
— Material components for the web
— Accessibility guidelines
— Developer tutorials
You can find the full documentation here at https://material.io/

DEVELOPER+DESIGNER FRAMEWORKS SALLY SKERRETT
iOS PRINCIPLES
Most iOS apps are built using components from UIKit, a
programming framework that defines common interface
elements. This framework lets apps achieve a consistent
appearance across the system, while at the same time offering a
high level of customization.
UIKit elements are flexible and familiar. They’re adaptable,

enabling you to design a single app that looks great on any iOS
device, and they automatically update when the system
introduces appearance changes.
The interface elements provided by UIKit fit into three main

categories: Bars, Views, Controls
You can find the full documentation here at https://developer.apple.com/design/

human-interface-guidelines/ios/bars/navigation-bars/
SALLY SKERRETT
USE ICON KITS

For small app icons such as like/share/upload use existing
icon kits. Check here (Android) or here (iOS)
SALLY SKERRETT
UI ELEMENTS
UI ELEMENTS SALLY SKERRETT
BARS
Tell people where they are in your app, provide navigation, and may
contain buttons or other elements for initiating actions and
communicating information.
STATUS BARS
The status bar appears along the upper edge of the screen and displays
useful information about the device’s current state, like the time, cellular
carrier, and battery level. The actual information shown in the status bar
varies depending on the device and system configuration.
Use the system-provided status bar. People expect the status bar to be
consistent systemwide. Don’t replace it with a custom status bar.
NAVIGATION BARS
A navigation bar appears at the top of an app screen, below the status bar,
and enables navigation through a series of hierarchical screens. When a
new screen is displayed, a back button, often labeled with the title of the
previous screen, appears on the left side of the bar.
NAVIGATION BARS
A navigation bar appears at the top of an app screen, below the status bar,
and enables navigation through a series of hierarchical screens. When a
new screen is displayed, a back button, often labeled with the title of the
previous screen, appears on the left side of the bar.
Don’t forget the back button! If

you use a burger menu in the
top left corner it turns into a
back arrow or an X depending
on whether you access new
screens or open the menu.
TAB BARS
A tab bar appears at the bottom of an app screen and provides the ability
to quickly switch between different sections of an app.
SEARCH BARS
A search bar allows people to search through a large collection of values
by typing text into a field. A search bar can be displayed alone, or in a
navigation bar or content view.
SEARCH BARS
A search bar allows people to search through a large collection of values
by typing text into a field. A search bar can be displayed alone, or in a
navigation bar or content view.
TOOL BARS
A toolbar appears at the bottom of an app screen and contains buttons for
performing actions relevant to the current view or content within it.
TOOL BARS
A toolbar appears at the bottom of an app screen and contains buttons for
performing actions relevant to the current view or content within it.
Or sometimes at the top

BURGER MENU
There is a debate about the usability of burger menus that it’s important to
mention. They are not recommended in iOS guidelines but are in Android.
iOS believe the Tab Bar beats side burger menus and that side burger
menus can reduce discoverability, glanceability, and add friction to the
experience. All leading to lower engagement.
VIEWS / CONTENT PAGES

Contain the primary content people see in your app, such as text, graphics,
animations, and interactive elements. Views can enable behaviors such as
scrolling, insertion, deletion, and arrangement.
VIEWS / CONTENT PAGES

Contain the primary content people see in your app, such as text, graphics,
animations, and interactive elements. Views can enable behaviors such as
scrolling, insertion, deletion, and arrangement.
MAP VIEWS
A map view lets you display geographical data within your app and
supports most of the functionality provided by the built-in Maps app.
TABLE VIEWS – LISTS

A table presents data as a scrolling, single-column list of rows that can be
divided into sections or groups. Use a table to display large or small
amounts of information cleanly and efficiently in the form of a list.


TABLE VIEWS – CARDS

Cards contain rich media, primary title, supporting text, and actions. They
might have more or less information or be repeated in lists. Card
collections can be filtered in a variety of ways, including by date or
alphabetical order. If a collection can be filtered, the filter must apply to
each card in the collection.
CONTROLS
Initiate actions and convey information. Buttons, switches, text fields, and
progress indicators are examples of controls.
PICKERS
A picker includes one or more scrollable lists of distinct values, each of which
has a single selected value—appearing in darker text in the center of the view.
PICKERS
A picker includes one or more scrollable lists of distinct values, each of which
has a single selected value—appearing in darker text in the center of the view.
SEGMENTED CONTROLS
A segmented control is a linear set of two or more segments, each of which
functions as a mutually exclusive button.
SCROLLING
It seems obvious but it is important to remember. Don’t try to fit
everything into the visible screen but do put most important info there.
Scrolling should not go on endlessly.
ICON ANIMATION
If your app uses a burger menu, once the burger menu opens the
burger symbol usually animates into a close button.
SALLY SKERRETT
WIREFRAMING CLASS TASK

Make a wireframe of the function from start to finish.
HOMEWORK SALLY SKERRETT
WEEK 6 TASK
1. Create an information architecture map for the app overall, and for
each core function. (Use figjam in figma to work collaboratively)
2. In one team figma file start to wireframe 3 core functions digitally in

Figma, one function per person (named), use kits below. Use real text
in your wireframes so we understand the functions.
3. Choose one of the screens from your wireframe function with content
(button, card, text, image, icon) and design it in 4 different ways.
4. Complete Figma task (see next pages).
5. Develop your concept, personas, user journeys, core functions,

scenarios, user engagement strategies, additional technologies,
augmented reality, virtual reality, or interactive accessories. (this should
be ongoing throughout the semester)
ANDROID WIREFRAME UI KITS: FROM MATERIAL MATERIAL DARK THEME DESIGN KIT: https://www.figma.com/
community/file/787036571667088922
MATERIAL 2: https://www.figma.com/community/file/
778763161265841481 CARBON UI KIT FOR FIGMA (UNOFFICIAL)
MATERIAL 3: https://www.figma.com/community/file/ https://www.figma.com/community/file/874592104192380079
1035203688168086460
MATERIAL DESIGN TIME AND DATE PICKERS KIT: https:// IOS 15 UI KIT FOR FIGMA: https://www.figma.com/community/
www.figma.com/community/file/1001534940974132136 file/984106517828363349
USE YOUR FONTS IN FIGMA

Make sure your team has the typeface you are using
for your visual language (Global Comms).
Note: You do not need to use the actual typefaces in

your wireframe yet.
To use desktop /local fonts:
Figma desktop version (free)

If you have installed the Figma app on your Mac, the
local fonts installed on your computer are available in
the Figma font picker.
https://www.figma.com/downloads/
Figma web-based version (free)

Install a special font service app to use the fonts
you've installed.
https://www.figma.com/downloads/
Reload any open Figma tabs to show your local fonts.
Upload font to team:

This is only available for organisations for instructions:
https://www.wikihow.com/Add-Fonts-to-
Figma#Uploading-Fonts-to-a-Team
References: https://www.wikihow.com/Add-Fonts-to-Figma
WEEK 6 FIGMA TASK

1. Watch the tutorials opposite. FIGMA TUTORIAL: PROTOTYPING: https://www.youtube.com/watch?v=-
sAAa-CCOcg&list=PLXDU_eVOJTx7aqRW3Skp1aRT9ktC3ctqA&index=4
2. Modify your walkthrough (onboarding screens), improve titles and text
based on feedback and add one screen (frame) for each function, FIGMA TUTORIAL: Presentation View: https://www.youtube.com/watch?
start with important functions and move to less important functions. v=NooR1uqCgtg&list=PLXDU_eVOJTx7aqRW3Skp1aRT9ktC3ctqA&index=3
3. Prototype frames linking them using the Figma tutorial: Prototyping
FIGMA TUTORIAL: DEVICE FRAMES AND SCROLLING: https://
4. Your walkthrough frames do not need scrolling, but your functions will! www.youtube.com/watch?
Make sure to watch the video: Device frames and scrolling to v=ST6DOO11zuA&list=PLXDU_eVOJTx7aqRW3Skp1aRT9ktC3ctqA&index=6
understand vertical and horizontal scrolling, importance of bounding
box sizes, fixing positions, and using device frames for wireframing
your functions. We will review this again after the midterm. You need
to be aware of the possibilities now.
Please check below from last week:

1. Name your frames and layers correctly
2. Make a 4 column grid with gutter and margins 16 pixels
3. Make an 8 pixel square grid. Components must align to this.
4. Make a 4 pixel square grid. This is your baseline grid for text.
5. Make your paragraph text line height a multiple of 2 or 4
6. Functions titles use one of the headline text styles.
7. Description text uses the paragraph style.
8. Make sure all your text styles includes typeface, size, line height,
paragraph spacing, and if required letter spacing.
APPLIED SCIENCES
AND ARTS
SALLY SKERRETT
MIDTERM INTRO
01 Concept and Scenario presentation (3–4 mins)
(Thursday 28th March, room and time TBC)
Present app in a scenario (story). Include up to three characters from your
personas (e.g. beginner, intermediate, extreme or advanced user). The
scenario should promote your app!
In the scenario title clearly all the app functions and user engagement
strategies. Include functions / engagement strategies before or after the
core experience, but focus on the core experience.
In the scenario and app use core findings from research, eg pain
moments your app fixes, questions answered in the app, and happy
moments enhanced for all your users.
If you have a visual direction for your global comms business idea use it in
the scenario (eg illustrations, pictograms etc). This is not a must.
In your pdf submission add all weekly UX research tasks on topic (but do
not present), topic research, personas, user journey. Label it clearly.
Your presentation should be simply but well designed, use a grid and
submit as a pdf
50% of midterm grade

APPLIED SCIENCES
AND ARTS
ADAPTED FROM THE ORIGINAL LECTURES
OF JOCHEN BRAUN BY SALLY SKERRETT
MIDTERM
Title of every function Scene
Description
Use Sign system pictograms here Persona interacting
Describe every user engagement strategy used Description

APPLIED SCIENCES
AND ARTS
SALLY SKERRETT
MIDTERM
02 Walkthrough + Core Functions Wireframe Prototype
(28.03, link to be sent by email)
It must be engaging, emotional, usable (test it, are all the steps there?)
and of a high technical standard (file correctly produced in Figma with text
and components aligned to 8px square grid and 4 columns, text styles,
color styles, grid styles, components should be clearly shown in styles and
component frame libraries on the side.
Figma On-boarding Screens Walkthrough

Create mobile app on-boarding screens/walkthrough in Figma consisting
of one screen per app function.
Each screen must have title of function, description (approx 10-12 words)
and an illustration of function (illustration, sketch, pictogram or more
advanced if you developed a visual language).
Link the on boarding screens in Figma, record a video in Figma, and

submit the video (mp4) and the Figma files and link.
Figma Core Functions Wireframe Prototype

Wireframe 3 core functions from start to end.
Record and submit a video (mp4) in Figma, and Figma file and link, and
jpegs of all screens.
50% of midterm grade

APPLIED SCIENCES
AND ARTS
SALLY SKERRETT
MIDTERM
If you will use additional technology, explain how and why.
(QR-code scanning, augmented reality, a secondary device..)
Throughout the scenario story it should be clearly stated which

user engagement strategies will be incorporated in app.
You can show mobile screen, but it is not mandatory.
If possible use the visual language you are developing and

imagery from your research.
If not use sketches / pictograms like the urban farming example

in the presentation.
APPLIED SCIENCES
AND ARTS INTRODUCTION
SEE YOU ALL SOON
References
https://www.interaction-design.org/literature/topics/design-thinking
APPLIED SCIENCES
AND ARTS INTRODUCTION SALLY SKERRETT
WEEK DATES LECTURE TUTORIAL ASSIGNMENT

Week 1 03.02—08.02 Lecture 1: Formal course introduction No tutorial H1 RESEARCH 1: Download software: Figma +
research 1 presentation
Week 2 10.02—15.02 Lecture 2: Interaction design and Tutorial 1: Class task: persona workshop H2 PERSONAS: Develop concepts, personas +
persona research methods Feedback: Research presentation Figma task
Week 3 17.02—22.02 Lecture 3: User journey research Tutorial 2: Class task: User journey workshop H3 USER JOURNEY: User journey + list core
and core function development Feedback: Persona functions + 1min concept pitch + Figma task +
develop previous tasks based on feedback
Week 4 24.02—29.02 Lecture 4: User engagement strategies Tutorial 3: Class task: Understand + add user H4 USER ENGAGEMENT: User engagement
engagement strategies. Feedback: User strategies + Figma task + develop tasks 123 and
journey and align to Global Comm concept align app concept to Global Comm (GC) concept
Week 5 02.03—07.03 Lecture 5: Scenario development Tutorial 4: Class task Scenario development 15% GRADED SUBMISSION 1 (H1+2+3+4)
+ midterm intro. Feedback: Aligned GC app H5 SCENARIO: Scenario outline + 1 scenario scene
concept + user journey + core functions with visualized + Figma task + develop tasks if required
user engagement strategies + persona
Week 6 09.03—14.03 Lecture 6: IOS elements overview (students Tutorial 5: Class task Wireframing functions H6 WIREFRAME: Wireframe functions in Figma +
can also refer to UI elements glossary workshop. Feedback: Scenario outline and scenario + walkthrough + previous tasks if
lecture wk8) one scene (Follow up persona + user journey required
+ core function list)
MIDTERM 16.03—01.04 NO LECTURE NO TUTORIAL Concept + scenario + figma walkthrough + core

function wireframes
Week 7 02.04—08.04 Lecture 7: Midterm student feedback Tutorial 6: Class task: identity presentation H7: Wireframe functions in Figma + develop
(GC) + Feedback: Midterm Concept + scenario, walkthrough, previous tasks if required +
scenario + figma walkthrough + core function visual lang from Global Comms
wireframes
Week 8 13.04—18.04 Lecture 8: UI and UX Tutorial 7: Class task: identity presentation H8 FUNCTIONS: Function wireframes + Figma
UI elements for wireframe development (GC) + Feedback: Midterm Concept + prototyping task + collect mockups for rough draft
scenario + figma walkthrough + core function poster
wireframes
Week 9 20.04—25.04 Lecture 9: Part 1: Part 1: Principles of good Tutorial 8: Class task: Feedback: Concept + H9 VISUAL IDENTITY: Develop functions + add
design. Midterm examples + project scenario + figma walkthrough + core function visual identity to one function + Figma animation
development Figma animation for mobile screens + visual identity task + walkthrough + application overview A1
application walkthrough poster draft
Week 10 27.04–02.05 Lecture 10: Part 2: Principles of good design, Tutorial 9: Class task Announce final H10 POSTER: Develop functions (apply visual
Dieter Rams (Braun), Jonathon Ives (Apple), submission. Feedback: Concept + scenario + identity to all functions) + animate walkthrough +
UX + UI Figma animation for core functions figma walkthrough animation + core function application overview A1 poster
screens + visual identity
Week 11 07.05—13.05 Lecture 11: Pre-Final student consultations Tutorial 10: Class task + Feedback: Develop 15% GRADED SUBMISSION 2 (H7+H8+H9+H10)
project for final submission H11 PROGRESS 1: Develop functions + walk-
through animation + application A1 poster
Week 12 FINAL 14.05—20.05 Lecture 12: Previous student mobile app final Tutorial 11: Class task + Feedback: Develop H12 PROGRESS 2: Develop functions + walk-
ASSIGNM. outcomes overview project for final submission through animation + application A1 poster
REVISION WK 21.05—27.05 NO LECTURE NO TUTORIAL DEVELOP FINAL SUBMISSION
60% FINAL SUBMISSION DATES TBC: Mobile
FINAL TBC 28.05–
application animated prototype + figma files +
SUBMISSION 13.06
Mobile application poster + GUC archive folder
APPLIED SCIENCES
AND ARTS
SALLY SKERRETT
GRADING
30% ASSIGNMENTS
Submitted Week 5 15% GRADED SUBMISSION 1 (H1+2+3+4)
Submitted Week 11 15% GRADED SUBMISSION 2 (H8+H9+H10)
10% MIDTERM SUBMISSION
60% FINAL SUBMISSION (DATE TBC)

Guc 1529 62 40814 2024-03-11T13 21 22

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Guc 1529 62 40814 2024-03-11T13 21 22

Uploaded by

Copyright:

Available Formats

APPLIED SCIENCES

AND ARTS GUC ‫اﻟﺠـﺎﻣﻌــــﺔ اﻷﻟﻤﺎﻧﻴــــﺔ ﺑـﺎﻟﻘﺎﻫــــﺮة‬

06 PROTOTYPING, IA AND UI ELEMENTS

Sally Skerrett Mai Sedkey Peter Mohr

Each screen view works in a sequence to achieve a certain goal

— Always provide a clear path. People must know where

— Design an information structure that makes it fast and

— Use touch gestures to create fluidity. Make it easy to

— Use standard navigation components. Users are already

— Use a navigation bar to traverse a hierarchy of data. Add

— Use a tab bar to present peer categories of content or

— Use a page control when you have multiple pages of the

Make one choice per screen until you reach a destination. To

Switch between multiple content categories. Music

Move freely through content, or the content itself

A common app navigation pattern involves

Try to notice navigation patterns in the mobile Navigation 1:

This is the fastest and cheapest way to test a concept.

They work in a sequence to achieve a certain goal within your app

They can be in black and white or with limited color.

Use color to highlight navigational elements or action buttons.

USE UI + WIREFRAME KITS

— In Adobe XD click: File>Get UI Kits> https://www.figma.com/community/file/787036571667088922

— Apple iOS here Carbon (unofficial)

— Wireframes here https://www.figma.com/community/file/874592104192380079

Material documentation contains:

You can find the full documentation here at https://material.io/

UIKit elements are flexible and familiar. They’re adaptable,

The interface elements provided by UIKit fit into three main

You can find the full documentation here at https://developer.apple.com/design/

USE ICON KITS

Don’t forget the back button! If

Or sometimes at the top

VIEWS / CONTENT PAGES

VIEWS / CONTENT PAGES

TABLE VIEWS – LISTS

TABLE VIEWS – LISTS

TABLE VIEWS – LISTS

TABLE VIEWS – CARDS

WIREFRAMING CLASS TASK

2. In one team figma file start to wireframe 3 core functions digitally in

4. Complete Figma task (see next pages).

5. Develop your concept, personas, user journeys, core functions,

USE YOUR FONTS IN FIGMA

Note: You do not need to use the actual typefaces in

To use desktop /local fonts:

Figma desktop version (free)

Figma web-based version (free)

Upload font to team:

WEEK 6 FIGMA TASK

Please check below from last week:

50% of midterm grade

Use Sign system pictograms here Persona interacting

Describe every user engagement strategy used Description

Figma On-boarding Screens Walkthrough

Link the on boarding screens in Figma, record a video in Figma, and

Figma Core Functions Wireframe Prototype

50% of midterm grade

Throughout the scenario story it should be clearly stated which

You can show mobile screen, but it is not mandatory.

If possible use the visual language you are developing and

If not use sketches / pictograms like the urban farming example

WEEK DATES LECTURE TUTORIAL ASSIGNMENT