Zoom In (and Out) To A New Webpage

In computing, a zooming user interface or zoomable user unterface (ZUI, pronounced zoo-ee) is a graphical environment where users can change the scale of the viewed area in order to see more detail or less.


Basically, you can zoom in and out of a pane to get more details of a hard to see area, like zooming in on a high-res image, and move from area to area.  A great example of this is Google Maps (Or Yahoo).

Imagine a web where you drag a box over a webpage, and depending on the area you go over, that area zooms in, and more content is shown.  I don’t really have animating skills, so I can’t show you, so I’ll try to describe an example.  Basically, expand the ZUI to hide unwanted content (and not just because there are not enough pixels to show it)

See the link in the top right corner of this page “« Pornography Laws“?  Imagine if you dragged a box over the item (like on Windows Desktop) and all of a sudden the page starts to zoom in to the article on Pornography Laws?  Sure, you could click the link and it’d work too, but that is a small example.

Another example would be dragging a box over the quote in the beginning of this post.  It would zoom in to the wikipedia article and now you have the wikipedia article open without me needing to use the <a href=””> part.  Now, a question becomes, how do you zoom out?  There are three posible solutions.  One is the page giving a default “Zoom Up” page.  The next one is the back button.  It would understand each Zoom In as going to a new page.  The third, and most accessible one would be having a box you can zoom into that takes you back to the first page.

How is this different from a link?  Well, one, you could still be considered to be on the same page when you zoom in on it to other content.  The second is that you can still use other things in the box.  Say you have a zoomable element that you can post content into, a rich text editing environment.  There are other elements in the page.  You zoom into the rich text editing box and it becomes bigger, and all other parts of the page are removed.  An extra button becomes visible “Zoom Out” that you can click to go back to the full webpage.  Anything set before is still set as long as you are in the same domain.  Thus, if there is a Title section, and you have it set, it isn’t discarded.

So, how might this be done using HTML?  Look at the following example.

<!– http://example.com/zoom/index.html will be considered the location for this –>
<link rel=”zoom” href=”http://example.com/index.html”&gt;
<div id=”calendar” zoom=”http://example.com/zoom/calendar.html&#8221; zoom-save=”no”>
<!– Mini-Calendar Code Here –>

Note that I’m using the HTML 5 tag.  This isn’t a part of HTML 4.  The second thing to note is the link with a rel value of “zoom”.  This means that if the person zooms up, they go to that website.  This really shouldn’t be used too often, but could be possible (like say you have I-Google and one of the widgets in it is Gmail.  Google knows this, and thus has a zoom up link for your I-Google page).  Then note that the div tag.  It has two properties.  One is zoom which takes you to a bigger calendar page where you can do smaller edits.  The next is “zoom-save”.  This means that any variables are shared between them, so you are not just going to a whole new page, but a zoomed in version with the same more functionality in it.

This has a very low if not no chance of becoming mainstream though.  Still, it’s a cool concept.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s