+ All Categories
Home > Design > Firefox UI Concept - 2010

Firefox UI Concept - 2010

Date post: 07-Aug-2015
Category:
Upload: james-hatfield
View: 31 times
Download: 0 times
Share this document with a friend
Popular Tags:
16
“User Centric Web Browsing
Transcript

“User  Centric  Web  Browsing  

User-­‐Centric  Web  Browsing  

Out  with  the  old…      Browsers  have  tradi7onally  been  perceived  as  a  “Window  into  the  internet”  meant  to  provide  a  transparent  view  of  whatever  the  web  developer  of  a  par7cular  page  chose  to  display  (in  concert  with  the  browser  user’s  preferences).    This  100%  agnos7c  approach  is  no  longer  a  valid  posi7on  to  take.  Browsers  DO  influence  how  the  web  is  viewed.  It  is  7me  for  browser  makers  to  take  responsibility  for  this  and  begin  providing  a  more  user  centric  set  of  tools  for  their  customers.    

Web  info  panel  closed      The  proposed  informa7on  panel  and  toolbar  starts  closed,  using  minimal  pixel  space  to  announce  it’s  presence  and  provide  an  easy  to  click  on  long  ver7cal  target  similar  to  a  scrollbar  region.    When  a  user  clicks  or  the  panel  in  it’s  closed  state  it  will  slide  out  to  the  most  recent  posi7on  with  the  last  used  seNngs  in  place  –  seNngs  to  be  described  in  the  following  slides.    

User-­‐Centric  Web  Browsing  

User-­‐Centric  Web  Browsing  

Ac6ve  Pages  –    thumbnail  view.    The  new  tabs  –  horizontal  tabs  have  been  replaced  by  a  ver7cal  thumbnail  list  of  websites.  

User-­‐Centric  Web  Browsing  

Ac6ve  Pages  –    thumbnail  view.    The  first  thing  you  may  not  have  no7ced  is  that  the  web  site  has  been  zoomed  to  automa7cally  fit  the  available  width.  This  is  a  newly  supported  feature  of  Firefox  which  can  be  used  to  great  effect  in  this  interface.  

User-­‐Centric  Web  Browsing  

Ac6ve  Pages  –    thumbnail  view.    A  new  menu  of  display  op7ons  is  presented  on  the  right,  including:  Current  Page,  Ac7ve  Pages,  History,  Favorites,  Tags,  Search  and  allowing  for  3rd  party  plugin  developers  to  place  a  menu  entry  as  well  as  an  area  for  the  user  to  save  custom  presets  (bookmark  groups,  saved  searches,  etc).    

User-­‐Centric  Web  Browsing  

Ac6ve  Pages  –    thumbnail  view.    Increasing  the  width  of  the  ac7ve  pages  panel  allows  more  ac7ve  web  pages  to  be  displayed  without  needing  to  scroll.    

User-­‐Centric  Web  Browsing  

Ac6ve  Pages  –    thumbnail  view.    In  response  the  web  page  zooms  out  even  more,  con7nuing  to  allow  the  user  to  see  the  full  web  page.    

User-­‐Centric  Web  Browsing  

Ac6ve  Pages  –    thumbnail  view.    No7ce  the  menu  bar  at  the  top  of  the  panel:    1.  List/Thumbnail  toggle    2.  “View”  Sor7ng  op7on  menu  3.  Informa7on  detail  slider  

(provides  more  or  less  informa7on  about  each  web  page  in  the  thumbnail  grid)    

4.  Search  box  to  filter  results  by  keyword  ,  tag  or  other  criteria.  

 

User-­‐Centric  Web  Browsing  

Ac6ve  Pages  –    thumbnail  view.    Using  the  slider  at  top  a  user  can  reduce  the  size  of  the  website  thumbnail  previews  to  fit  many  addi7onal  web  pages.    The  current  displayed  web  page’s  details  are  shown  at  top  in  this  minimized  view.    Hovering  the  mouse  over  a  thumbnail  will  display  a  tool7p  with  the  page  7tle  and  URL  of  the  web  page.    

User-­‐Centric  Web  Browsing  

Ac6ve  Pages  –    List  view.    Users  who  s7ll  need  more  room  for  ac7ve  pages  can  use  the  “List”  view  to  see  all  ac7ve  web  pages  easily  and  with  more  details/op7ons.    The  slider  at  top  adjust  the  amount  of  informa7on  displayed  about  each  web  page,  both  the  selected  page  as  well  as  all  other  pages  in  the  current  list.  

User-­‐Centric  Web  Browsing  

Web  Tool  Bar  Open  With  the  ‘Current  Page’    Informa7on  Panel  Displayed.    The  Current  Page  display  shows  a  variety  of  informa7on  about  the  current  visible  web  site/page.      Features  include:    • Ra7ng  based  favorites/bookmarks  • Tagging  op7ons  • Social  Sharing  Links  • Browsing  History  for  this  page  • Cookie  management  • Page  specific  meta-­‐informa7on  (7tle,  descrip7on,  rss  feeds,  keywords,  copyright  informa7on.    

User-­‐Centric  Web  Browsing  

Web  Tool  Bar  Open  With  the  ‘Current  Page’    Informa7on  Panel  Displayed  in  a  narrow  view.    No7ce  how  the  details  informa7on  about  this  page  reflows  to  fit  a  more  narrow  panel  area.    

User-­‐Centric  Web  Browsing  

Return  to:  Web  Tool  Bar  Open  with  the  ‘Ac7ve  Pages’    Informa7on  Panel  Displayed.    Users  who  s7ll  need  more  room  for  ac7ve  pages  can  use  the  “List”  view  to  see  all  ac7ve  web  pages  easily    

User-­‐Centric  Web  Browsing  

Addi6onal  Views  

History   Sort  By:  Date  /  Domain  

Conclusion    Replacing  Tabs  with  a  more  scalable  ac7ve  page  naviga7on  UI  is  not  enough.    A  browser  should  be  able  to  provide  people  with  tools  they  can  use  to  manage  their  internet  experience,  share  that  experience  with  friends  and  family  and  opt-­‐in  to  3rd  party  u7li7es  which  integrate  with  the  browser  seamlessly.      The  concept  presented  herein  addresses  both  the  micro  and  macro  task  sets.  As  tabs  are  an  organiza7onal  tool  available  directly  from  the  browser  UI,  so  should  be  the  rest  of  the  browser’s  features,  rather  than  hidden  away  in  control  panels.  Addi7onally,  the  browser  should  provide  smart  informa7on  about  websites,  web  pages,  bookmarks,  tags  and  more.  

User-­‐Centric  Web  Browsing  


Recommended