HELLO!

I'm introducing UI and a bit of UX for Firefox OS

First thing first, let's make it clear

UI design isn't UX design,

it's a part of UX design

UI = User Interface

UX = User Experience

 

What's the difference???  OK! Let's learn a "হাড়ি-পাতিল" theory...

 

So what is the main UX process for app?

  • Think first
  • Design your app for user
  • Develop them with proper code

THINK

DESIGN

CODE

So, let's start to build app for your user

not for showing what can you do!

What's the goal of UCD?

- Connect your user

- Show them content not design

- But make it visually impressive

User

Centered

Design

But, wait! We have some problems!

while we deal with Mobile app

  1. Limited internet
  2. Limited battery
  3. Handedness
  4. Small screen
  5. Text scanning

Limit! Limit! Small!

what to do???

- Give user what (s)he want to see not what you want show

- Don't use bunch of API or cool stuff if it is not necessary

- Be wise, be minimalistic, do awesomeness!

 

 

How my user hold my phone it's a big big issue!

Do you think you read on screen?

Nope! Nope! Nope!

Your brain just scan a few of alphabet and you think you're reading!

father of UXD

I invented the term because I thought human interface and usability were too narrow. I wanted to cover all aspects of the person's experience with the system including industrial design, graphics, the interface, the physical interaction, and the manual.

Don's project with Jakob Nielsen treat as a bibel of UX

http://www.nngroup.com/articles/

OK! Now we know some basic concept, let's focus on:

Actually we're going to talk about some core feature of Firefox OS

But don't afraid, problem solving is fun!

and

finding & solving problem is your  job as a Designer.

Special features of Firefox OS:

- No Fixed screen size

- No physical Back button

- We'll build web app but without any browser function

- No copy paste till 1.4 (even 2.1)

- Low hardware specification

 

 

 

While you are doing design keep in mind a fluid & responsive layout

 

♦ But don't bother to make everyone happy, some time it's impossible even for sir AJ!!!

♦ While creating your mockup/wireframe start designing 320x480px (mobile first)

♦ Tell your coder / code it with special css feature which can be found here: Graphic design for responsive sites

 

Basic Layout of an app

  1. Header
  2. Scrollable content
  3. Fixed footer

HEADER

1. Left side area: back button, drawer or cancel

2. Title name of your page/app

3. Action button

Try to put a app drawer and create your own functionality

People don't like to type, they like to tap!

So, give them value editor

To help user not to type, We can also use:

IDLE
SWITCH

TOGGLE
BUTTONS

RADIO
BUTTONS

There are some rules, some words,
 that You must follow!

you can check this link: STYLEGUIDE

RULES!!!

WE ALSO HAVE A
 STYLEGUIDE

but remember rules are made to be broken!

but you can't break any rule unless you know it!!!

Generic Color Palette

Buttons are most important parts of an UI

simply buttons have 3 different states on mobile:

1. Normal / Idle

2. Focused / Tapped / Pressed

3. Disable

Use Toolbar or Tab Bar gain your user's trust

If you looking for a complete set of UI pack

Go visit here:

http://buildingfirefoxos.com/downloads/

There is a nice icon font which consist all the icon of GAIA

get it from here:

https://github.com/gaia-components/gaia-icons/archive/master.zip

Finally it's time to check our marketplace

& Default apps

Firefox OS 2.0 get so many update on it's interface let's check them!

But our previous versions are not so bad,

they have followed traditional process :D

Let's review an app with bad ratings!

It has 2 review, 1 & 3 star

Why? Why? Why?

- No back option

- Just created a mobile version

- Missing browser option

- Users can't connect with the app..!!

Let's see a super cool stuff  :D

LINE app has 3,323 Reviews

Features:

- Nice visual approach

- Tab bar

- Handedness

- Enough space for tap

- Minimal & Simple

- and it's really helpful!

We have another great App..!

Features:

- Nice drawer

- Zoom in/out

- Shows messages

- Simple & Minimal

- It's fun to use..!

This Canvas app has 5 star rating!

Another piece of awesomeness:

Features:

- Very very important app

- Buttons are big enough to touch

- Strong & useful color scheme

- Nice functionality

Wikipedia - another great work!

Features:

- Auto Wikipedia Zero detection!

- A wide used site

- Full functional app

- Great search bar

- But, lot's of text but it's wiki ;) :D

 

Finally...

we are in the end...

Or a very beginning of your new design process

That's it!

now it's Your turn...

If you want to say thanks, I never mind

twitter: @SashotoSeeam

https://www.behance.net/seeam

sashotoseeam@yahoo.com

fb.com/sashoto.seeam

Introducing UI and UX for Firefox OS

By Sashoto Seeam

Introducing UI and UX for Firefox OS

  • 1,748