Three glowing screen are set amidst arching piles of ghostly pale books. One continuously reconfigures Twitter posts about reading, on another bouncing letters randomly settle into place, revealing pointed quotes about reading drawn from well-known books, while the third uses the viewer’s image to trace out a series of related passages.

Photos below:

more project information here.

I am sure I’m not the only one who feels this way, since ceasing to exist on Facebook so will drastically reduce my ability to communicate with many friends. And this gets to the crux of the challenge: are we so addicted to Facebook that we can’t tell whats good for us anymore? Is Facebook an Evil? Are they trying to Monopolize the social web? All of the above??

Last December, Facebook broke the social “contract” that we all signed up for by changing its privacy defaults. It switched the context right under our noses, prompting some 65% of users to go public without even knowing it. Many users still have no clue how visible their profile information and photos are (we all know how unintuitive FB privacy controls are). While this is totally unacceptable behavior and places some users in potentially risky situations, I can’t help but also look at the flip side. Facebook is on its way to becoming the first truly global social network platform that has potential to fundamentally change the way we experience the web. By placing social information in context and not in a single, aggregated feed, Facebook might actually succeed at creating some fantastically useful socially-aware and personalized browsing experiences. All that simply traded for our privacy!
Well, not so simple.

Some think that it is possible to bring the demise of Facebook by creating applications that will scare users; creepy apps that know way too much about you. While this might make headlines, it is unlikely that such an approach will prove to be successful in the long term. As a society, we’ve become so hooked on Facebook, that we are willing to take potential future risks in return for current socializing. And realistically, unless I were a hormone-fluctuating, socially uncomfortable teen, what content could your app possibly surface that is so detrimental to my life?

Raul Pacheco hits the spot when he writes that Facebook’s actions are ‘not enough for us to care’:

There has been a lot of debate online about how Facebook keeps making it more difficult for users to keep their privacy. My question to everyone is — if Facebook is that “evil,” why are we all still using it? Why not be completely democratic and demonstrate (with our vote, e.g. with our not having a Facebook account) that this loss of privacy is unacceptable?
The answer is — because not enough of us care. If the millions of users of Facebook really cared that much about their privacy, they would make the Big Brother/Sister accountable. But in a society that is valuing privacy less and less, accountability has become an afterthought and not mainstream. Sadly, that also means that we have lost the power of protecting our privacy to commercial interests.

I wouldn’t say that Facebook users don’t care about privacy. I just think that many don’t care enough to be obsessing and worrying about potential future risks. Even if one recognizes a slightly riskee photo or comment, it is tempting to just leave online, as the fun of social interaction trumps the thought about potential future uncomfort. While these types of actions most likely don’t affect users in the near term, there are two things that we should be aware of: (1) the consequences of our actions onto others, and (2) the long term implications of sharing our data.

This is where User Experience Design can play a significant role, as we are facing an extremely difficult design challenge. We need to create a visual language that helps users understand these potential risks taken by making content visible. Not unlike the automobile association in West London who set the first warning signs on roads in 1908, or the cigarette manufacturers who were mandated to highlight the medical issues correlated with smoking, we need to figure out best practices to display potential risks without scaring users away. We need to design digital warning signs that keep attracting people’s attention and not fade into the background. We should be aware of our privacy controls at all times – perhaps by placing icons of just how many people can see an item before it is submitted.

As Danny Sullivan writes:

I shouldn’t have to dive into complicated settings that give the fiction of privacy control but don’t — since they’re so hard to understand that they’re ignored. I shouldn’t need a flowchart to understand what friends of friends of friends can share with others. Things should be naturally clear and easy for me . . .

Would you like to see your dad, teacher and ex-girlfriend’s icons next to an item before submitting it? Probably not.
Is there a system that can helps us visualize the audience to which we are writing? That’s something users don’t want to see, and thus a challenging design problem.

There is a growing need for applications that help us understand our personal online brand: how we are portrayed online, and what potential risks we face. What’s the equivalent of an anti-virus application, that instead of protecting our computer, protects our online persona? We need something that can warn us when a risky action was taken online (either by us or our within our social network).

Facebook’s new APIs makes is super easy for web developers to build on top of its social graph. Almost too easy. By embedding widgets in the form of like buttons and status update boxes, websites can easily personalize their views according to you. For a growing number of services, this is done without even requiring users to login. For example, on likebutton.me you will see your Facebook friend’s activities from a variety of websites, as long as have previously logged into Facebook. A central listing of what my friends recommend, separated by topics. Creepy, but potentially useful.

The same type of connection happens with both yelp and pandora. At first feels creepy, yet as an experience, potentially something we may get used to, or even like.

Here are two examples where things can get out of hand:
(1) There are Facebook “community pages” that automatically add any status updates that include the page keyword. From CIA and FBI to Terrorism, they’ve got it all, with your name and thoughts right there, thanks to your inability to understand their privacy defaults! As a user, without even knowing it, your name is automatically associated with a community that algorithmically formed around a used keyword.

(2) It is dead simple to create Evil “Like” Buttons – by hacking the button to point to another page. Again, adding the risk that our usernames would be associated with something we are not aware of.

As a User Experience designer my task is to think about users first, place them in the center of my design, protect them, respect their needs, and help them accomplish whatever they come to do in the best possibly way. However, Informing users of privacy hazards is a difficult design challenge, one that Facebook obviously doesn’t want to handle. As web entrepreneurs, should we be leveraging this powerful yet scary technology that Facebook has enabled?
If so, how do we warn our users without scaring them away? How do we show users what they don’t really want to see or deal with? How can we warn of risks that only affect the far future?

We should also ask ourselves if regulation is needed. And if so, what would it look like and how it might further complicate the matter?

In his book’s second chapter (on borrowing) he quotes Einstein: “The secret to creativity is knowing how to hide your sources”. What he lays out later in the chapter, describes “smart” ways of borrowing – basically don’t borrow ideas from your direct competitor, but possibly someone else in a related field, or yet better, someone in a completely unrelated field, who is trying to solve a similar problem. Bill Gates borrowed solutions from the existing software industry, while Charles Darwin borrowed his creative solutions from places not usually associated with biology (Galapagos). Borrow from within your industry and you’re considered a thief or lowly pirate. While if you borrow from another industry, you are considered a creative genius.

Another interesting quote from that chapter: “If you steal from one author, it’s plagiarism; if you steal from many, it’s research.” He continues to write about how Bill Gates stole the mouse+click GUI idea that Macintosh developed first. Apparently Steve Jobs spotted that technology at XEROX parc, hired the reseracher who worked on the mouse, and put him to work on the Mac. Gates immediately recognized the potential of the idea, and blatantly copied it. After years of legal battles, Microsoft won the suit, on the claim that the original idea didn’t originate from Apple, but from Xerox. Dan Bricklin, a prominent software engineer who developed the first spreadsheet, said about the suit, “This is a sad day for the software industry in America.” He added, “Writing software is not the same as writing a book. Software builds on what was there before.” Bricklin is right. Software builds on what was there before, but so does every commercial product, engineered machine, scientific theory, and creative thought… also books!

In the Q&A session I asked the author what his thoughts of DRM & technology/web copyright. He didn’t have a stong opinion other than – he understands why its necessary for profitability, but also sees how it inhibits the creative process.

My notes from his talk:

Borrowing Brilliance is about taking ideas and restructuring them. New ideas are always built out of existing ideas. The key becomes where you go to look for ideas. Main questions:

1. can you teach someone to be creative? Definitely.
2. is there a defined process? Maybe.

defined six steps:
the origin of a creative idea:
step 1) defining – define the problem that you’re trying to solve
step 2) borrowing – borrow ideas from places with a similar problem
step 3) combining – connect and combine these borrowed ideas (this is the essence of creativity)
the evolution of a creative idea:
step 4) incubating – allow the combinations to incubate into a solution
step 5) judging – identify the strength and weakness of the solution
step 6) enhancing – eliminate the weak points while enhancing the strong ones

DEFINING
We’re not necessarily good at the formation of a problem. The problem is the foundation of a creative idea. Its important to define, understand and describe the problem. Its important to describe the problem from different perspective, define it differently.

BORROWING
The problem with define where to look for the solution. John Nash had an economics problem: how do members of the economy act, he sensed that they were acting with incomplete information. He recognized that as the same problems he had playing poker. He took the same solutions to the problems from poker into create a decision-making model as a solution for his economics problem.

how do you solve a navigation problem? First look at other software companies. Then step away outside that industry and look at search&rescue teams, truck drivers… etc, and see how they solve their navigation problems.

COMBINING
this is the essence of creativity.
Walt disney created disneyland by using a movie metaphor while constructing the park. Used a move metaphor while breaking out the different experiences that people should have in different parts of the park. Facebook’s original metaphor was an online yearbook. Creative thinkers use metaphors. Isaac Newton was thinking in terms of metaphors – making the connection between the apple and the moon – the apple falls down, but moon moves around. combined celestial and earth-based physics.

INCUBATING
Input to the subsounscious is important => incubate => output from the subconscious (usually happens in the shower! -> the one time of the day where we’re not consciously thinking). Before going to bed, important to glance over some things we’re thinking about, then put it away… It’ll come back.

JUDGING
This is used to drive/improve the idea. Put on your positive and negative hats. So in the next phase, you can bring up an idea that doesn’t have the negative bits and mostly the good bits. This helps develop your intuition, identifying good ideas fast. Example: steve jobs visits XEROX PARC 20 years ago. Goes wild over a demo of mouse+click GUI. Identifying that as a brilliant idea vs. others that had the same demo…

ENHANCING
Trial and error as the passage to the creative solution.

[tags]creativity,book,review, David Kord Murray [/tags]

Even with the staggering numbers that we have seen over the past year (the newspaper industry shed an estimated 15,970 jobs in 2008, and 8,484 through April of this year), it is important to remember that the future of quality journalism does not depend on the future of newspapers. People have gotten used to getting the news they want, whenever, however and wherever they want. This change is here to stay. The discussion needs to move from “How do we save newspapers?” to “How do we strengthen journalism — regardless of which platform it is delivered on…”

We must not act as if we are still operating in the old content economy, as opposed to the new link economy. The survival of the industry cannot be found by “protecting” content behind walled gardens. The future is a linked economy – it is search engines, online advertising, citizen journalism and foundation supported investigative funds.

Arianna firmly believes in a hybrid future:

where old media players embrace the ways of new media (including transparency, interactivity, and immediacy) and new media companies adopt the best practices of old media (including fairness, accuracy, and high-impact investigative journalism). The emphasis should not be on subsidizing what exists now, but on how to rededicate ourselves to the highest calling of journalists — which is to ferret out the truth, wherever it leads. Even if it means losing our all-access-pass to the halls of power.

Unfortunately, this is a concept that has fallen out of favor with too many journalists who, like Pontius Pilat, wash their hands of finding the truth and instead are obsessed with a false view of “balance” and the misguided notion that every story has two sides. And that the truth can be found somewhere in the middle. But not every story has two sides and the truth is often found lurking in the shadows.

[tags] huffington, news, senate,arianna[/tags]

I must say, it was actually much more complex than I’d thought. When controling pagination of a site, especially with dynamic content being pulled from a database, the application constantly needs to figure out where in relation to the database results, the user is browsing, how many pages forward or backward exist, and all the end cases (first/last pages).

In this example I used the jquery library to make the AJAX calls (no need to usually). The ajax call updates the #results div with the content. The .php file holds the majority of the functionality – calculates the number of pages (according to # of entries we want per page), then according to the current page, calculates how many before and after, creates the links, and makes sure the current page is not clickable.

Here are links to the files: (note – you need to insert your own database info in the php file for this to work)

pagination.html

pagination.php

And below is the .php code I created:

——————————————————–>>

<?php

$mysql = mysql_connect(”***your host***”,”***your username***”,”**your password***”) or die(mysql_error());
mysql_select_db(”****your db****”,$mysql) or die(mysql_error());

$NUMPADDING=6; // number of links on either side of the current page

$pagenum = $_GET['pagenum'];
$page_rows = $_GET['page_rows'];

$data = mysql_query(”SELECT * FROM entries”) or die(mysql_error());
$rows = mysql_num_rows($data);

//This tells us the page number of our last page
$last = ceil($rows/$page_rows);

// SQL QUERY
//This sets the range to display in our query
$max = ‘limit ‘ .($pagenum – 1) * $page_rows .’,’ .$page_rows;

//echo “SELECT * FROM entries $max”;

$data_p = mysql_query(”SELECT * FROM ***your tablename*** $max”) or die(mysql_error());

// FIRST
echo’<div id=”pagination”>
<ul id=”pagination”>
<li class=”first”><a href=”javascript:getPage(\’1\’,\”.$page_rows.’\',\’this\’)”>first</a></li>’;

// PREV
if ($pagenum>1) {
$prevpage=$pagenum-1;
echo’<li class=”previous”><a href=”javascript:getPage(\”.$prevpage.’\',\”.$page_rows.’\',\’this\’)”><- previous</a></li>’;
//echo’…’;
// —PADDING

if ($pagenum-$NUMPADDING>0)
$start=$pagenum-$NUMPADDING;
else
$start=1;

for ($i=$start;$i<$pagenum;$i++){
$tmp=$i;
echo’<li><a href=”javascript:getPage(\”.$tmp.’\',\”.$page_rows.’\',\’this\’)”>’.$tmp.’</a></li>’;
}
}
else
// no prev necessary
echo’<li class=”previous-off”><- previous</li>’;

// CURRENT PAGE
echo’<li class=”active”>’.$pagenum.’</li>’;

// NEXT
if ($pagenum<$last) {
// PADDING+++
if ($last-$pagenum > $NUMPADDING)
$end=$NUMPADDING;
else
$end=$last-$pagenum;

for ($i=1;$i<=$end;$i++){
$tmp=$pagenum+$i;
echo’<li><a href=”javascript:getPage(\”.$tmp.’\',\”.$page_rows.’\',\’this\’)”>’.$tmp.’</a></li>’;
}
//echo’…’;
$nextpage=$pagenum+1;
echo’<li class=”next”><a href=”javascript:getPage(\”.$nextpage.’\',\”.$page_rows.’\',\’this\’)”>next -></a></li>’;
}
else
// no prev necessary
echo’<li class=”next-off”>next -></li>’;

//LAST
echo’
<li class=”last”><a href=”javascript:getPage(\”.$last.’\',\”.$page_rows.’\',\’this\’)”>last</a></li>
</ul><br/>
</div>
‘;
?>

[tags]pagination,javascript,js,php,jquery,html,tutorial,code,example[/tags]

]]> http://giladlotan.com/blog/2009/03/pagination-using-php-javascript-and-html/feed/ 4 http://giladlotan.com/blog/2008/09/making-rounded-divs/ http://giladlotan.com/blog/2008/09/making-rounded-divs/#comments Mon, 22 Sep 2008 21:52:27 +0000 http://giladlotan.com/blog/?p=387 Here’s the image-based method I used to make rounded DIVs. Use the following HTML code along with the CSS properties and .gif files. The results are a lot of fun and look quite good:

[tags]html,code,programming,round,div,css[/tags]

Here’s the image-based method I used to make rounded DIVs. Use the following HTML code along with the CSS properties and .gif files. The results are a lot of fun and look quite good:

[tags]html,code,programming,round,div,css[/tags]

]]>

::sigh::

Dear Facebook marketers: I would’ve thought that you’d be a tad more in tune with your users by now. I know you are desperately working on finding ways to monetize fb, but please don’t push that in between your users and their friends. This is a diagram that lures services and websites to use your service, but does little to tickle user’s appetite to provide access to their personal information. Even though I was appaled by this representation, I was too curious to try it out, so clicked ‘connect’.

What I found pleasantly surprised me – an underlying social layer of little games and applications around the Insider’s content. Similar to a facebook application, a user can interact with friends or any other person hanging out on the site. The Insider provides its users with multiple ways to interact – through chat, direct messaging and games. In the context of this site, none of my fb friends had hung out there. However, I can certainly see the advantage of not needing to negotiate friend connections again and again when signing up to new services.

I am still hesitant to “take my friends” with me, everywhere I go. I believe that if this is the model fb aims to reach, there will be an exodus of users seeking to find a “cleaner” platform – one that will let me connect to my sister without shoving ads in-between us. It also heavily depends on how facebook deals with user privacy, and how/if they are pushed to make business decisions regarding monetization. Erick Schonfeld of techcrunch writes about Facebook Connect’s privacy features:

Despite patching up some Beacon’s privacy holes, it never really took off. Facebook Connect offers a much better privacy model. It is very clear that you are signing up for it, and there is the convenience factor of being able to use your existing Facebook username and password. And whatever your privacy settings are on Facebook get automatically transferred to every Facebook Connect site where you are also logged in. And for developers, there are just a lot more things they can do with Facebook Connect than make actions appear in members’ feeds. Groups, events, photos, and user status messages can all be grabbed from Facebook and used as features on other sites. As Facebook users make changes on Facebook (or on the partner sites), the changes are updated everywhere.

[tags]facebook, connect, insider, cbs[/tags]

2) Netvibes just came out with a completely new design – visually and conceptually. They provide their users with a private page (what I’ve been using for years) to aggregate RSS feeds, as well as their new ‘ginger’ public interface. Finally they are starting to do interesting things with their user-base. So this is my public page, well equipped with my blog feed, my flickr&twitter feeds, my facebook badge and yet another ‘wall’ for you all to scribble on ::groan:: I know, am way over that. They include a followers/activities tab which just might help make this service catch – its extremely useful for your own use when organizing RSS feeds, but can be extremely helpful when this metadata is shared among a social group. Let people organize the data according to their interests => provide a platform for them to share amongst each other => own a “catchy”, highly used service => … make money ?

Don’t know about the last part, but I’m definitely enjoying playing around with the designs:

3) Piclens is a fantastic way to browse through images. Installs as a browser-app. into firefox and allows to creates a horizontal for viewing images from websites. Cool, slick and intuitive interface. This is how my flickr stream looks through the app:

[tags]visual,design,browsing,netvibes,ginger,gmail,piclens[/tags]