addons and fennec ui

26
Add-ons in the Fennec UI Madhava Enros, Mozilla

Upload: madhava-enros

Post on 28-Jan-2015

136 views

Category:

Technology


5 download

DESCRIPTION

Presentation at the Mozilla/Maemo Danish Weekend (http://wiki.maemo.org/MozillaMaemoDanishWeekend) about things user-interface things to consider when writing a Fennec add-on.

TRANSCRIPT

Page 1: Addons And Fennec UI

Add-ons in the Fennec UIMadhava Enros, Mozilla

Page 2: Addons And Fennec UI

Fennec design themes and goals

• Maximize screen space dedicated to content

• Minimize typing wherever possible

• Give primacy of interaction to a finger-oriented touchscreen

• accommodate finger size

• increase the physicality of the interface

• Support the quick lookup scenario

Page 3: Addons And Fennec UI
Page 4: Addons And Fennec UI
Page 5: Addons And Fennec UI
Page 6: Addons And Fennec UI
Page 7: Addons And Fennec UI
Page 8: Addons And Fennec UI

also: block popups, share location, install

software, etc.

Page 9: Addons And Fennec UI
Page 10: Addons And Fennec UI
Page 11: Addons And Fennec UI

Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Fusce tristique. Cras ipsum

urna, semper vitae, aliquet eget, rutrum

sed, pede. Morbi at sapien. Etiam cursus

tincidunt est. Praesent et mauris. Nullam

sodales, nulla et facilisis lobortis, libero

enim posuere lacus, vitae convallis sapien

odio in enim. Quisque pede. Cras dui. Sed

lobortis leo vel velit. Aenean aliquam, lacus

eu porta suscipit, magna nisi cursus leo, in

d igniss im fe l is fe l is u l t r ices urna.

Pellentesque accumsan porta ipsum.

Aenean egestas.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce

tristique. Cras ipsum urna, semper vitae, aliquet eget, rutrum sed,

pede. Morbi at sapien. Etiam cursus tincidunt est. Praesent et

mauris. Nullam sodales, nulla et facilisis lobortis, libero enim

posuere lacus, vitae convallis sapien odio in enim. Quisque pede.

Cras dui. Sed lobortis leo vel velit. Aenean aliquam, lacus eu porta

suscipit, magna nisi cursus leo, in dignissim felis felis ultrices urna.

Pellentesque accumsan porta ipsum. Aenean egestas.

+ various transient alerts, awesomescreen

Page 12: Addons And Fennec UI

What about starting from Firefox?

Page 13: Addons And Fennec UI
Page 14: Addons And Fennec UI
Page 15: Addons And Fennec UI
Page 16: Addons And Fennec UI
Page 17: Addons And Fennec UI
Page 18: Addons And Fennec UI
Page 19: Addons And Fennec UI

menubars

toolbars

sidebars

statusbars

context menus

} no

Page 20: Addons And Fennec UI

menubarsrandom access to many options

toolbarsquick actions, alerts, ambient indicators, search

sidebarsconcurrent/background tasks, tools for content area

statusbarsquick access, alerts, ambient indicators,

context menusobject related actions, hiding many action (unfortunately)

Page 21: Addons And Fennec UI

sidebars become permanent tabs?

quick access go on awesomebar screen?above titlebar or below content?

ambient indicators become alerts?or, better, peek indicators?

tap and hold for context access

be creative - here:or in gestures

Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Fusce tristique. Cras ipsum

urna, semper vitae, aliquet eget, rutrum

sed, pede. Morbi at sapien. Etiam cursus

tincidunt est. Praesent et mauris. Nullam

sodales, nulla et facilisis lobortis, libero

enim posuere lacus, vitae convallis sapien

odio in enim. Quisque pede. Cras dui. Sed

lobortis leo vel velit. Aenean aliquam, lacus

eu porta suscipit, magna nisi cursus leo, in

d igniss im fe l is fe l is u l t r ices urna.

Pellentesque accumsan porta ipsum.

Aenean egestas.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce

tristique. Cras ipsum urna, semper vitae, aliquet eget, rutrum sed,

pede. Morbi at sapien. Etiam cursus tincidunt est. Praesent et

mauris. Nullam sodales, nulla et facilisis lobortis, libero enim

posuere lacus, vitae convallis sapien odio in enim. Quisque pede.

Cras dui. Sed lobortis leo vel velit. Aenean aliquam, lacus eu porta

suscipit, magna nisi cursus leo, in dignissim felis felis ultrices urna.

Pellentesque accumsan porta ipsum. Aenean egestas.

Page 22: Addons And Fennec UI

12

3

Did he say “peek?”

Page 23: Addons And Fennec UI
Page 24: Addons And Fennec UI

ed Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Fusce tristique. Cras ipsum

urna, semper vitae, aliquet eget, rutrum

sed, pede. Morbi at sapien. Etiam cursus

tincidunt est. Praesent et mauris. Nullam

sodales, nulla et facilisis lobortis, libero

enim posuere lacus, vitae convallis sapien

odio in enim. Quisque pede. Cras dui. Sed

lobortis leo vel velit. Aenean aliquam, lacus

eu porta suscipit, magna nisi cursus leo, in

d igniss im fe l is fe l is u l t r ices urna.

Pellentesque accumsan porta ipsum.

Aenean egestas.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce

tristique. Cras ipsum urna, semper vitae, aliquet eget, rutrum sed,

pede. Morbi at sapien. Etiam cursus tincidunt est. Praesent et

mauris. Nullam sodales, nulla et facilisis lobortis, libero enim

posuere lacus, vitae convallis sapien odio in enim. Quisque pede.

Cras dui. Sed lobortis leo vel velit. Aenean aliquam, lacus eu porta

suscipit, magna nisi cursus leo, in dignissim felis felis ultrices urna.

Pellentesque accumsan porta ipsum. Aenean egestas.

b

f

a

g

h

c

Page 26: Addons And Fennec UI

Please get in touch!

https://bugzilla.mozilla.org/show_bug.cgi?id=477628

Bug 477628 - Fennec should offer a pleasant user-experience

[email protected]

twitter: madhavablog: madhava.com/egotism/madhava in #UX and #mobile