<h1 id="section">An Information-Centric Web Browser</h1>
<br />
<h2 id="title">Overview:</h2>
<br />
For my final submission, I didn't develop an interactive
prototype mainly because of insufficient time and my unfamiliarity
with prototyping tools. I felt that if I forced myself to create a low-
quality prototype, it would distract, rather than help, the judges
from understanding my design.<br />
<br />
My design consists of the following main features:<br />
<ul>
<li><i><b>Address Bar</b></i> - The main purpose of this
feature is to allow the users to check the status of the current web
page and to go to another destination. In my original mockup, I had
included some implementation details on how the address bar works. But
now I think its behaviors should be determined by the users'
preferences and conceptual model. But one thing is certain: the
address bar should not be overloaded with too many functions. Doing so
will complicate the interaction and obscure the purpose of the address
bar.</li>
<li><i><b>Status Bar / Notification Area</b></i> - The
functions of status bar are integrated into the address bar to achieve
simplicity and consistency. Furthermore, the notification area is now
a standalone feature that offers developers the ability to notify the
users at their discretion. Depending on the robustness needed, the
notification could be implemented by using web feed technologies or
add-on.</li>
<li><i><b>Tabs</b></i> - The use of tabs have improved the
users' workflow when using a web browser. While a conventional tab bar
might achieve a good balance between simplicity and functionality, its
limited usefulness does not satisfy many users' needs. Thus, an
additional tab manager is used to implement several different viewing
options, including list, thumbnails, tree, grid, etc. In particular,
the grid view allows the users to view multiple pages at the same
time. The layout of the grid could be specified by using a simple
table editor.</li>
<li><i><b>Contextual Menu</b></i> - The purpose of the
contextual menu is to facilitate sharing information across different
online services. Since the intended scenario for this competition is
set at a somewhat futuristic time, I assume that there will be a
working implementation of semantics markup that will help the browser
offer relevant commands. But to implement this feature at present
time, the best we could do is to use a default menu for all selection.
The user would then browse the categorized commands to perform their
tasks. Even though natural language processing could help improve this
process, I am not sure whether a web browser should handle this
complicated problem. An ineffective use of natural language processing
would offer little UX improvement while making the browser bloated.</
li>
<li><i><b>Main Menu</b></i> - The main menu consolidates all
the different managers, including the bookmark manager, tab manager,
etc. Even though it is called menu, it offers more than just a list of
commands. It is a full-featured interface that supports all UI
controls. The users could also dock the menu to the side and use it as
a sidebar. The main goal of this feature is to improve visibility,
consistency and coherency.</li>
</ul>
<br />
<br />
<h2 id="title">Short Summary:</h2><br />
This is a concept design for a web browser that helps the
users (1) provide information, (2) access information, (3) connect
information.<br />
<br /><br />
<h2 id="title">Description:</h2><br />
<b>Thought Process</b>
<ul>
<li>Before I designed the web browser, I asked myself:
"What is Internet?" And my definition is that: The Internet is a
platform where people use services and applications to share
information through various media (e.g. text, image, video, etc.) As
a result, a web browser should provide the necessary mechanisms to
assist users in sharing information.</li>
<li>In order to make the browser as minimalistic as
possible, I've used the bottom-up approach, i.e., I started with a
blank UI and incrementally added features that I think will be
necessary to a web browser.</li>
<li>The following are the features that I've come up
with.</li>
</ul>
<a name="address_bar"><b>Address Bar</b></a>
<ul>
<li>A browser should provide a way for the users to go to
their destination web page.</li>
<li>Cybercrime will only become a bigger issue in the
future. From a security perspective, it is crucial to know where we
are when we are surfing on the internet. And unlike the real world,
the Internet is a place in which everything could be fabricated.
Therefore, it is necessary for the web browser to provide additional
UI elements that help the users to determine the credibility of
websites.</li>
<li>The address bar is good candidate for satisfying these
two needs.</li>
<li>Implementation Details:</li>
<ul>
<li>What I have in mind is basically a combination of
what Firefox 3, Chrome, and Internet Explorer 8 have done with their
address bars.</li>
<li>When the users click on the address bar, a drop-
down menu will show up. It contains a list of websites with high
"frecency" value and websites that users have specified (analogous to
bookmarks bar.) The idea is that the users don't need to enter
anything to go to their most frequently visited websites.</li>
<li>As the users start entering the address, a list of
matching addresses from history and bookmarks will be shown. Also,
the drop-down menu will show suggested addresses that match what the
users are typing. This list of addresses will be categorized to
eliminate any confusion.</li>
<li>When the users press enter, there are three
outcomes.</li>
<ul>
<li>If the users enter keywords only, the browser
will send the query to the default search engine. Therefore, the
address bar could also serve as a search bar.</li>
<li>If the address is a complete URL, the browser
will take the users directly to that website. </li>
<li>If the users press a combination of keys (e.g.
ctrl + enter, shift + enter, etc), the browser will always take the
users to the most relevant web page regardless of the completeness of
the address entered.</li>
</ul>
</ul>
</ul>
<a name="status_notification"><b>Status Bar / Notification
Area</b></a>
<ul>
<li>The two most important features of the status bar are
the progress bar and preview of a link address. I think that these
two features could be moved into the address bar. Other than saving
space, this approach could also improve consistency by bringing the
status and the address of the current page together. As for the
preview of a link address, displaying it in the address bar reaffirms
the purpose of the address bar, which is to take users to a specific
web page. Therefore, the users only need to look at the address bar
to determine the location and status of a web page.</li>
<li>Sometimes, the status bar is used by add-on developers
to display notification. But I think that notification is important
enough that it deserves its own space. Very often, we go to a web
page to see if there is any update. This polling process is not
efficient, which also explains the usefulness of web feed. Therefore,
the ability to notify should extend to other online services.</li>
<li>Implementation Details:</li>
<ul>
<li>The users have complete control over what
notification they want to see.</li>
<li>The notifications are not intrusive. But they are
noticeable enough that the users could always see what have been
changed.</li>
<li>Clicking on the notification icon will bring up a
small preview menu. An example might be a short list of unread e-
mails.</li>
</ul>
</ul>
<a name="tabs"><b>Tabs</b></a>
<ul>
<li>Tabbed window has been a great tool for multi-tasking
in web browser. But I think that it would be more useful if the
browser offers a way for the users to look at multiple web pages at
the same time. This could be done either in the OS level or the
browser level. From a consistency perspective, I think that windows
management should be handled by the operation system. After all, we
don't want to have a messy windows environment where the users have to
use both Multiple Document Interface (MDI) and applications windows at
the same time. But I also think that web pages are different from
typical documents. The relations between different web pages could be
used for organizing them. And the browser is more capable of
determining that relation than the operation system. There is also
the problem of demand. After all, not all users need to look at
multiple web pages at the same time. So I think that in addition to
the tab bar, the web browser should have a tab manager that could be
used for satisfying different users' needs.</li>
<li>Implementation Details:</li>
<ul>
<li>The tab bar is located below the address bar.
Regardless of the number of opened tabs, the
...
I'm cc'ing the concept series mailing list, since I think this might be valuable to them as well.
I agree with what you are saying about the restrictive capacity of pie menus. See also [1]. But then again, I also think that a handful of easy to reach contextual commands should be enough for you to get by for your normal Firefox usage. If you take for example the start menu in Windows Vista, which makes the most used menu items really easily to reach and all the other items still accessible. I think such an approach works very well.
There is also certainly some initial weirdness associated with pie menus, but I think these can be pretty quickly overcome with just a little bit of usage. It might still not be the perfect solution for every user, but I think there is be a big potential audience.
In any case, I really like your concept and I think it would be a big step forward if the contextual menus in the browser would be a) more sensitive to their informational context, and b) also more sensitive to particular user behavior.
Chaowen Tan wrote: > Thank you. I’m glad that you like my concept.
> I think pie menu is great for context menu that has a few simple > commands. But its shape may be too restrictive for menu that has more > than 5 commands (words). I also think the interaction is a little weird > when the pie menu has multiple levels. I guess people are used to > reading things that have linear organization. So I primarily use > conventional menu in my concept.
> - Chao
> On Mon, May 11, 2009 at 10:31 PM, Jakob Hilden <jakobhil...@gmail.com > <mailto:jakobhil...@gmail.com>> wrote:
> I really like your information-centric contextual menu. Have you > experimented with a contextual pie menu? I think the combination of > the two would be the absolute killer!
> > <h1 id="section">An Information-CentricWeb Browser</h1> > > <br /> > > <h2 id="title">Overview:</h2> > > <br /> > > For my final submission, I didn't develop an interactive > > prototype mainly because of insufficient time and my unfamiliarity > > with prototyping tools. I felt that if I forced myself to create > a low- > > quality prototype, it would distract, rather than help, the judges > > from understanding my design.<br /> > > <br /> > > My design consists of the following main features:<br /> > > <ul> > > <li><i><b>Address Bar</b></i> - The main purpose of this > > feature is to allow the users to check the status of the current web > > page and to go to another destination. In my original mockup, I had > > included some implementation details on how the address bar > works. But > > now I think its behaviors should be determined by the users' > > preferences and conceptual model. But one thing is certain: the > > address bar should not be overloaded with too many functions. > Doing so > > will complicate the interaction and obscure the purpose of the > address > > bar.</li> > > <li><i><b>Status Bar / Notification Area</b></i> - The > > functions of status bar are integrated into the address bar to > achieve > > simplicity and consistency. Furthermore, the notification area is now > > a standalone feature that offers developers the ability to notify the > > users at their discretion. Depending on the robustness needed, the > > notification could be implemented by using web feed technologies or > > add-on.</li> > > <li><i><b>Tabs</b></i> - The use of tabs have improved the > > users' workflow when using a web browser. While a conventional > tab bar > > might achieve a good balance between simplicity and > functionality, its > > limited usefulness does not satisfy many users' needs. Thus, an > > additional tab manager is used to implement several different viewing > > options, including list, thumbnails, tree, grid, etc. In particular, > > the grid view allows the users to view multiple pages at the same > > time. The layout of the grid could be specified by using a simple > > table editor.</li> > > <li><i><b>Contextual Menu</b></i> - The purpose of the > > contextual menu is to facilitate sharing information across different > > online services. Since the intended scenario for this competition is > > set at a somewhat futuristic time, I assume that there will be a > > working implementation of semantics markup that will help the browser > > offer relevant commands. But to implement this feature at present > > time, the best we could do is to use a default menu for all > selection. > > The user would then browse the categorized commands to perform their > > tasks. Even though natural language processing could help improve > this > > process, I am not sure whether a web browser should handle this > > complicated problem. An ineffective use of natural language > processing > > would offer little UX improvement while making the browser bloated.</ > > li> > > <li><i><b>Main Menu</b></i> - The main menu consolidates all > > the different managers, including the bookmark manager, tab manager, > > etc. Even though it is called menu, it offers more than just a > list of > > commands. It is a full-featured interface that supports all UI > > controls. The users could also dock the menu to the side and use > it as > > a sidebar. The main goal of this feature is to improve visibility, > > consistency and coherency.</li> > > </ul>
> > <br /> > > <br />
> > <h2 id="title">Short Summary:</h2><br /> > > This is a concept design for a web browser that helps the > > users (1) provide information, (2) access information, (3) connect > > information.<br /> > > <br /><br />
> > <h2 id="title">Description:</h2><br /> > > <b>Thought Process</b> > > <ul> > > <li>Before I designed the web browser, I asked myself: > > "What is Internet?" And my definition is that: The Internet is a > > platform where people use services and applications to share > > information through various media (e.g. text, image, video, etc.) As > > a result, a web browser should provide the necessary mechanisms to > > assist users in sharing information.</li> > > <li>In order to make the browser as minimalistic as > > possible, I've used the bottom-up approach, i.e., I started with a > > blank UI and incrementally added features that I think will be > > necessary to a web browser.</li> > > <li>The following are the features that I've come up > > with.</li> > > </ul>
> > <a name="address_bar"><b>Address Bar</b></a> > > <ul> > > <li>A browser should provide a way for the users to go to > > their destination web page.</li> > > <li>Cybercrime will only become a bigger issue in the > > future. From a security perspective, it is crucial to know where we > > are when we are surfing on the internet. And unlike the real world, > > the Internet is a place in which everything could be fabricated. > > Therefore, it is necessary for the web browser to provide additional > > UI elements that help the users to determine the credibility of > > websites.</li> > > <li>The address bar is good candidate for satisfying > these > > two needs.</li> > > <li>Implementation Details:</li> > > <ul> > > <li>What I have in mind is basically a combination of > > what Firefox 3, Chrome, and Internet Explorer 8 have done with their > > address bars.</li> > > <li>When the users click on the address bar, a drop- > > down menu will show up. It contains a list of websites with high > > "frecency" value and websites that users have specified (analogous to > > bookmarks bar.) The idea is that the users don't need to enter > > anything to go to their most frequently visited websites.</li> > > <li>As the users start entering the address, a list of > > matching addresses from history and bookmarks will be shown. Also, > > the drop-down menu will show suggested addresses that match what the > > users are typing. This list of addresses will be categorized to > > eliminate any confusion.</li> > > <li>When the users press enter, there are three > > outcomes.</li> > > <ul> > > <li>If the users enter keywords only, the browser > > will send the query to the default search engine. Therefore, the > > address bar
On Fri, May 15, 2009 at 18:23, Jakob Hilden <jakobhil...@gmail.com> wrote:
> Hey Chao,
> I'm cc'ing the concept series mailing list, since I think this might be
> valuable to them as well.
> I agree with what you are saying about the restrictive capacity of pie
> menus. See also [1]. But then again, I also think that a handful of
> easy to reach contextual commands should be enough for you to get by for
> your normal Firefox usage. If you take for example the start menu in
> Windows Vista, which makes the most used menu items really easily to
> reach and all the other items still accessible. I think such an
> approach works very well.
> There is also certainly some initial weirdness associated with pie
> menus, but I think these can be pretty quickly overcome with just a
> little bit of usage. It might still not be the perfect solution for
> every user, but I think there is be a big potential audience.
> In any case, I really like your concept and I think it would be a big
> step forward if the contextual menus in the browser would be a) more
> sensitive to their informational context, and b) also more sensitive to
> particular user behavior.
> Chaowen Tan wrote:
>> Thank you. I’m glad that you like my concept.
>> I think pie menu is great for context menu that has a few simple
>> commands. But its shape may be too restrictive for menu that has more
>> than 5 commands (words). I also think the interaction is a little weird
>> when the pie menu has multiple levels. I guess people are used to
>> reading things that have linear organization. So I primarily use
>> conventional menu in my concept.
>> - Chao
>> On Mon, May 11, 2009 at 10:31 PM, Jakob Hilden <jakobhil...@gmail.com
>> <mailto:jakobhil...@gmail.com>> wrote:
>> I really like your information-centric contextual menu. Have you
>> experimented with a contextual pie menu? I think the combination of
>> the two would be the absolute killer!
>> On Apr 19, 6:43 pm, Chao <chaowen...@gmail.com
>> <mailto:chaowen...@gmail.com>> wrote:
>> >
>> URL:https://webspace.utexas.edu/ct2962/www/An-Information-Centric-Web-Bro...
>> >
>> > <h1 id="section">An Information-CentricWeb Browser</h1>
>> > <br />
>> > <h2 id="title">Overview:</h2>
>> > <br />
>> > For my final submission, I didn't develop an interactive
>> > prototype mainly because of insufficient time and my unfamiliarity
>> > with prototyping tools. I felt that if I forced myself to create
>> a low-
>> > quality prototype, it would distract, rather than help, the judges
>> > from understanding my design.<br />
>> > <br />
>> > My design consists of the following main features:<br />
>> > <ul>
>> > <li><i><b>Address Bar</b></i> - The main purpose of this
>> > feature is to allow the users to check the status of the current web
>> > page and to go to another destination. In my original mockup, I had
>> > included some implementation details on how the address bar
>> works. But
>> > now I think its behaviors should be determined by the users'
>> > preferences and conceptual model. But one thing is certain: the
>> > address bar should not be overloaded with too many functions.
>> Doing so
>> > will complicate the interaction and obscure the purpose of the
>> address
>> > bar.</li>
>> > <li><i><b>Status Bar / Notification Area</b></i> - The
>> > functions of status bar are integrated into the address bar to
>> achieve
>> > simplicity and consistency. Furthermore, the notification area is now
>> > a standalone feature that offers developers the ability to notify the
>> > users at their discretion. Depending on the robustness needed, the
>> > notification could be implemented by using web feed technologies or
>> > add-on.</li>
>> > <li><i><b>Tabs</b></i> - The use of tabs have improved the
>> > users' workflow when using a web browser. While a conventional
>> tab bar
>> > might achieve a good balance between simplicity and
>> functionality, its
>> > limited usefulness does not satisfy many users' needs. Thus, an
>> > additional tab manager is used to implement several different viewing
>> > options, including list, thumbnails, tree, grid, etc. In particular,
>> > the grid view allows the users to view multiple pages at the same
>> > time. The layout of the grid could be specified by using a simple
>> > table editor.</li>
>> > <li><i><b>Contextual Menu</b></i> - The purpose of the
>> > contextual menu is to facilitate sharing information across different
>> > online services. Since the intended scenario for this competition is
>> > set at a somewhat futuristic time, I assume that there will be a
>> > working implementation of semantics markup that will help the browser
>> > offer relevant commands. But to implement this feature at present
>> > time, the best we could do is to use a default menu for all
>> selection.
>> > The user would then browse the categorized commands to perform their
>> > tasks. Even though natural language processing could help improve
>> this
>> > process, I am not sure whether a web browser should handle this
>> > complicated problem. An ineffective use of natural language
>> processing
>> > would offer little UX improvement while making the browser bloated.</
>> > li>
>> > <li><i><b>Main Menu</b></i> - The main menu consolidates all
>> > the different managers, including the bookmark manager, tab manager,
>> > etc. Even though it is called menu, it offers more than just a
>> list of
>> > commands. It is a full-featured interface that supports all UI
>> > controls. The users could also dock the menu to the side and use
>> it as
>> > a sidebar. The main goal of this feature is to improve visibility,
>> > consistency and coherency.</li>
>> > </ul>
>> >
>> > <br />
>> > <br />
>> >
>> > <h2 id="title">Short Summary:</h2><br />
>> > This is a concept design for a web browser that helps the
>> > users (1) provide information, (2) access information, (3) connect
>> > information.<br />
>> > <br /><br />
>> >
>> > <h2 id="title">Mockups:</h2><br />
>> > <a href="images/Mozilla-Design-Challenge-Mockup.jpg"><img
>> > src="images/Mozilla-Design-Challenge-Mockup.jpg" height="300"></a>
>> > <br /><br /><br />
>> >
>> > <h2 id="title">Description:</h2><br />
>> > <b>Thought Process</b>
>> > <ul>
>> > <li>Before I designed the web browser, I asked myself:
>> > "What is Internet?" And my definition is that: The Internet is a
>> > platform where people use services and applications to share
>> > information through various media (e.g. text, image, video, etc.) As
>> > a result, a web browser should provide the necessary mechanisms to
>> > assist users in sharing information.</li>
>> > <li>In order to make the browser as minimalistic as
>> > possible, I've used the bottom-up approach, i.e., I started with a
>> > blank UI and incrementally added features that I think will be
>> > necessary to a web browser.</li>
>> > <li>The following are the features that I've come up
>> > with.</li>
>> > </ul>
>> >
>> > <a name="address_bar"><b>Address Bar</b></a>
>> > <ul>
>> > <li>A browser should provide a way for the users to go to
>> > their destination web page.</li>
>> > <li>Cybercrime will only become a bigger issue in the
>> > future. From a security perspective, it is crucial to know where we
>> > are when we are surfing on the internet. And unlike the real world,
>> > the Internet is a place in which everything could be fabricated.
>> > Therefore, it is necessary for the web browser to provide additional
>> > UI elements that help the users to determine the credibility of
>> > websites.</li>
>> > <li>The address bar is good candidate for satisfying
>> these
>> > two needs.</li>
|
