Webmasters Gallery

The first Designer Daily newsletter has been sent today, and it contained the pack you see up here as a gift. Make sure you subscribe by leaving a comment with the subscription box checked, or in the sidebar. Don’t forget about the free animal vectors that you can get by subscribing to the feed.

This pack is a set of 10 famous cities’ skyline saved as Adobe Illustrator 10 document (Zipped file: 2Mo)
Cities included: Berlin – Chicago – Jerusalem – London – New York – San Francisco – Prague – Shanghai – Moscow – Sydney

Userfly is described as usability testing made easy. Since my review of Feedback Army I have been overwhelmed with different websites offering usability services in a quick and easy package. However, Userfly seems to stand out from the crowd! I have put it to the test and brought you my findings.

After using Userfly I can see why so many people talk about it. This application is thoroughly thought out and professionally done. To top it off, they even offer 10 free recordings a month to see if the service is right for you. How could I resist the temptation of testing such a service?

How it works

Userfly describes it’s service as the following:

userfly.com provides instantaneous web user studies by recording user visits and letting you play them back to see every mouse movement, click, and form interaction. Conducting a user study doesn’t have to be expensive or a logistic nightmare. With userfly.com you can perform simple and cheap user testing with your real users. And it only takes one minute to set up!

Userfly operates through a piece of javascript you place in your head tag.

I would say this is a pretty straight forward description of the service that I found to be true. This service allows you to easily record your visitors and reports are offered you to in video format. This report also contains many other helpful features and options.

Using Userfly to record your users is only the first step, however. Let me give you some insight on how to use this to better your website.

Steps to learning from Userfly

Following these steps can help you understand your user’s interactions with your website. Learning from these actions can help you improve UX by watching the movements within your user interface.

1. Embed the Code

   Once you sign up you are brought to offered a tab labeled Install. This option will present you with the javascript you asked to place in your head tag. There is even an option for one click install for TypePad and Blogger users.

   Be sure to check your site after you’ve installed the javascript. We had a slight mishap at UX Booth when entering the javascript. It seems that the script adds IDs to elements that don’t have IDs. Now I am not a big coder so I can not go into detail but Andrew and I looked into it a bit and discovered the CSS for our headers did not agree with having an ID added to them. For a short period of time our headers were whacked out and we had to remove the code. I continued testing on my gecko blog that I run and had no errors there.

   Also, be sure to remove the code when you want to stop testing. It seems there is a small bug at the moment that records the occastional visitor even when you specify a pause in the session recording in the Userfly control panel.

2. Wait for Users

   Once the javascript is installed the recordings start rolling in. Be patient, you will want to wait an hour or two if your website does not have high traffic to attain some real valuable recordings! Running Userfly on my gecko blog, which averages only between 100 to 200 visitors per day, I got some great results in the first 10 to 15 minutes but the real eye opening recordings happened in the next few hours.

   Also notice that Userfly by default will record you as a visitor too. You do have the option to block IPs through the control panel. You may consider doing this for your IP. Something else I noticed is that recordings that are very short are not added to your listings to prevent wasted time and money. I really liked seeing this!

3. Understand the Reports

   Each aspect of the Recordings page is important. The first portion of the Recordings page tells you what page was recorded. This is important to take note of as it is the starting point at which you viewer has landed on. Various parts of your website may have different templates and structures and it is important to take note of how possible first time visitors react with exposure to each type of page.

   The next part of the report shows you exactly where the user came from, if it can be detected. I saw an interesting difference in visitors from different sources. Some of our readers that visited from PSD Tuts stuck around and read articles in depth, while visitors from social websites came and skimmed very quickly. More research is needed to understand if this is valid pattern but it is something to consider when trying to keep users around for longer.

   The next two features are date, as in when the recording was captured, and page views, which tells you how many pages were viewed in the visit and how long the user was there. Both of these things can be factored into a bigger picture to see how different influences may change your users duration and exploration.

   Next is the location of the visitor with an option to view this location on a map. Users from different countries or even regions may interact with your site differently. Finally you are presented the browser the user is viewing you with as well as the option to save, delete, or ban an IP.

4. Watch the Videos

   Watching the videos is also very simple process. Simply select a visit and enjoy.

   This part is the most important bit, really. You need to set aside some time to sit and watch these. They can sometimes be boring and often time consuming. Some recordings it seems like the user fell asleep at the mouse when reading. Just remember, these interactions are what will lead you to your improvements!

5. Take Note of Interactions

   This really is the epiphany of Userfly. Pay special attention when watching those interaction recordings.

   Are users from search engines visiting your website and immediately leaving through google ads? Is it worth the loss? Do users from a specific forum seem to stay longer? Would you consider advertising with them to increase a stable audience?

   Ask yourself these kind of questions. Also, pay attention to what people click on and how they navigate. You know your design, you think it works well. You may be surprised when people click on items you never thought would look like links or not understand how to easily return to the home page. Studying these interactions can build a data bank of knowledge that will increase your UX skills and bring you up that extra notch you need!

6. Correct Problems

   This is it, time to bring it home. Now that you’ve amassed a list of problems that your website showcases you can now correct them! Use what you’ve learned and apply it to make the user experience better and more enjoyable for your users. It will easily increase profits, subscribers, and viewers.

   Don’t stop now though. Test again, improve again, and repeat! The fight is a never ending one for people interested in improving usability.

If you are looking for a powerful file manager ready to use in your web projects and simple to customize, take a look at this list with the best and free file manager currently in circulation. Some of these file managers support PHP only or javascript only or Ajax that will give you powerful tool to easily browse directories & files on the server, search, upload and download files, edit, copy, move, delete files and more.

If you know other interesting resources about this topic please leave a comment!

1. AjaXplorer

AjaXplorer is a free Ajax file manager with an easy-to-install file explorer for remotely managing files on a web server. Its “rich client” layout and actions make it accessible to any end-user for a variety of purposes: file management/sharing, photo gallery, code browsing, etc. Only PHP (4 or 5) is necessary, no database needed.

• Rename/Copy/Move/Delete/Download files or folders
• Upload multiple files and track status with progress bar (Flash required and no https)
• Create folders and empty files
• Edit Text files and code files (js, php, html, java, sql, perl), syntax is highlighted in the editor
• View Images online, preview images in the list, diaporama of a given folder
• Listen to MP3sonline without downloading them
• View Flash videos (FLV) online and full screen.
• Browse and Extract ZIP files online

2. fileNice

fileNice is a free php file browser, particularly useful if you have a ‘dump’ folder on your server where you regularly upload files and you want to be able to see what’s there.

3. File Thingie

File Thingie is a small web-based file manager written in PHP. It is intended for those who need to give others access to a part of their server’s file system when FTP is not practical. Through File Thingie you and your users get access to the most common functions:

• Simple — Just one file
• Upload multiple files at once
• Multiple users and user groups
• Create subdirectories
• Rename, move, delete and copy files and folders
• Search for file and folder names
• Control access to files based on black- or whitelists
• Edit text files
• Unzip files without downloading
• Easy customization of the CSS based layout
• Translate into your own language

4. MooTools based FileManager

A MooTools based File-Manager for the web that allows you to (pre)view, upload and modify files and folders via the browser. Features include:

• Browse through Files and Folders on your Server
• Rename, Delete, Move (Drag&Drop), Copy (Drag + hold CTRL) and Download Files
• View detailed Previews of Images, Text-Files, Compressed-Files or Audio Content
• Nice User Interface
• Upload Files via FancyUpload (integrated Feature)
• Option to automatically resize big Images when uploading
• Use it to select a File anywhere you need to specify one inside your Application’s Backend
• Use as a FileManager in TinyMCE

5. Relay

Relay is a wonderful piece of ajax code written with the aid of the prototype ajax toolkit. It does a wonderful job of uploading / downloading and managing files on your private server, let’s check out some of its features:

• drag-n-drop files and folders
• dynamic loading file structure
• upload progress bar
• thumbnail view, including pdf
• multiple users & accounts

6. CKFinder

CKFinder is a powerful and easy to use Ajax file manager for web browsers. Its simple interface makes it intuitive and quick to learn for all kinds of users, from advanced professionals to Internet beginners. Let’s check out some of its features:

• Folders tree navigation: intuitive for all users.
• Quality image thumbnails, making it quick to find things.
• Multi-language support with automatic user language detection.
• Sensitive context menus for files and folders.
• Full user control : create, rename and delete folders and files.
• Full developer control: all features can be precisely configured with a powerful ACL and user roles system.
• Lightweight interface.
• No page refreshes: quick responses.
• Secure file uploads: all uploaded files are checked according to the rules set by the developer.
• Full source code included for the server side integration.
• Instant integration with FCKeditor

7. eXtplorer

eXtplorer is a web-based File Manager. You can use it to. Features include:

• browse directories & files on the server and
• edit, copy, move, delete files,
• search, upload and download files,
• create and extract archives,
• create new files and directories,
• change file permissions (chmod) and much more…

Commodore 64 has been one of the best selling computers of all time. However, the computer was not even close to even the least advanced computers available today. It came with a RAM of 64 KB and yet we loved to play Atari and other games on it. In fact, games such as Atari created a whole new culture which is now referred to as the old school gaming culture.

In order to recreate the beauty and nostalgia of this almost antique computer, Ben Heck has modded the C64 Laptop. He used a genuine C64C motherboard and a gamecube power supply in order to start with the project. He also used the SD card to impersonate the floppy disk.

In fact, many people might now need to be told what floppy disks were all about. Nevertheless, the Ben Heck modded C64 laptop is certainly cool and would make any retro guy happy enough to forget the snazziest of laptops available today. You could sit back and enjoy an old game of Atari yet again and relive all those golden moments, which are otherwise rusting in our memories.

I am sure your colleagues and friends would be surprised and glad too, to see you carrying this cool mod if you ever get to make it yourself or get one for yourself. They would be able to relive their own youthful days too! Ben Heck is one awesome guy who always seems to mod the most amazing products. If you have been following all his mods, you would know how cool his Xbox Controller Monitor Hack] was.

Free icons are great resources for web designers as quality ones help creating beautiful outputs. But they are better when they come with the source files as it is possible to edit/improve them.

Smashing Magazine is sharing Flavour Extended icon set, a set of 450+ icons, that is created by Oliver Twardowski.

Icons are in 48*48px size & PNG format. PSD source files are also included.

The set contains icons of users, folders, file formats, actions, social bookmarking services & more.

Axiis is an open source data visualization framework & based on Degrafa, Flex & ActionScript 3.0.

It is a resource for both beginner & expert developers to create elegant charts.

 

 

Axiis comes with both ready-to-use visualization components & abstract layout patterns + rendering classes that makes it possible to create custom visualizations.

To view some beautiful examples of this framework, click here.

VFront is a dynamic front-end for MySQL & PostgreSQL databases written in PHP and Javascript.

It is not a database administration tool like phpMyAdmin and not replacing it: interface is for basic user working on data. Think about VFront as an interface tool for database, similar to MS access, but taking the lead with an easy access via web.

Using VFront, masks for managing your data in AJAX style, different rules and privileges for groups can be created.

It has reporting features in XML,HTML,PDF, statistics and much more.

To run this application, the database must be MySQL 5+ or PostgreSQL 7.4+.

Dragon Labs is featuring 3 beautiful CSS / JavaScript effects that you may want to use in your websites. Here they are:

Codename Rainbows

A solution to create rainbow effects by not using any images.

It is accomplished with the help of some JavaScript and CSS magic to apply a two-color gradient to any text. Shadows and highlights can also be applied.

 

Codename Putterfish

This is a CSS trick, specially used in menus, that fades any other elements when one of the items is hovered.

Codename DragonFish

It is technique to smoothly change colors and create ambient motion. A nice demo is presented here.

P.S. Rainbow & Putterfish are well-described & source files are offered. On the other hand, DragonFish, currently, only comes with the demo.

My Tiny TodoList is a totally free, simple open source todolist written in PHP and jQuery released from Max Pozdeev and based on my original MyToDoList application.

Using MyTiny TodoList you can add, modify or delete tasks, mark a task as completed and set task priority. Max improved a lot the interface with some nice jQuery effects and other general improvements. The result is very interesting and I suggest you to take it a look.

Max Pozdeev MyTinyTodoList Website
MyTinyTodoList Demo

 

Some screenshots:

 

 

Install My Tiny TodoList
1. Download, unpack and upload to your site.
2. If you want to use Mysql database instead of Sqlite – uncomment the line begining with $config[‘mysql’] in file ‘init.php’ and specify your settings as described in file.
Otherwise sqlite database file ‘todolist.db’ will be created in directory ‘db’. If no – create it manually and make it writeble for webserver/php.
3. Open in your browser file ‘dba.php’ from your site and create tables in databse.
4. Open ‘index.php’ in your browser to run the application.

In the past weeks I received some requests from my readers which asked to me to suggest a simple way to skin HTML form elements. There are a lot of ways to do that and a lot of posts with interesting resources about this topic. But if you want to save time and obtain a nice result I suggest you to use jqTransform or NiceForms.

Both scripts are very useful and simple to use. If you want to use a "native" script which doesn’t use an external JS framework (such as jQuery or MooTools) I think a good choice is NiceForms otwerwise, if you use jQuery, a good alternative is jqTransform. Take a look how they work.

1. jqTransform

jqTransform is a jQuery styling plugin wich allows you to skin quickly form elements in a very easy way. The only thing you have to do is to add a javascript inclusion to this plugin in the header section of your web page, create your form and add two lines of JS code to apply the transformation to your form.
Use this code to add a javascript inclusion to jqTransform:

<script type="text/javascript" src="jquery.jqtransform.min.js"> </script>

…now create a form with class property equal to jqTransform:

<form class="jqTransform"> <!– Add form elements here… –> <form>

…then add this JS code to apply the transformation:

<script type="text/javascript"> $(function() { $("form.jqtransform").jqTransform(); }); </script>

2. NiceForms

Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.
To implement form style transformation you have to add a javascript inclusion to NiceForms in your web page using this code:

<script type="text/javascript" src="niceforms.js"> </script>

…then create a form with class property equal to niceform:

 

<form class="niceform"> <!– Add form elements here… –> <form>