Advise on auto popup info button and ajax implementation

Next topic

Author	Message
Deo G W	Monday 20 August 2007 6:22:17 am I just implemented AJAX techniques to allow user-friendly visual selection of mobile phones for use. Check this out www.mobilemediacentre.nl/en/registration http://i101.photobucket.com/albums/m44/DeooGi/SC-REGI-AJAX-1.png http://i101.photobucket.com/albums/m44/DeooGi/SC-REGI-AJAX-1-2.png http://i101.photobucket.com/albums/m44/DeooGi/SC-REGI-AJAX-2.png http://i101.photobucket.com/albums/m44/DeooGi/SC-REGI-AJAX-3.png http://i101.photobucket.com/albums/m44/DeooGi/SC-REGI-AJAX-4.png http://i101.photobucket.com/albums/m44/DeooGi/SC-REGI-AJAX-5.png http://i101.photobucket.com/albums/m44/DeooGi/SC-REGI-AJAX-6.png http://i101.photobucket.com/albums/m44/DeooGi/SC-REGI-AJAX-7.png Click on the cell phone icon, there will be an in-line popup. I used GrayBox to do this. You can select the cell phone manufacturers on the left hand side, and choose your type of device in the middle frame. When the mouse hover the device image, product functionality and compatibility of the chosen device will be displayed on the right side under the device image. All cell phone info is retrieved from database. After you selected the device, you will be linked back to the registration page and see which device you have chosen. I have so far got some remarkable feedbacks: <i>make the information popup only popup when it is clicked. (The i - image). Since an accidental hover may cause an unwanted popup. You could just use a tooltip saying, click for more info etc. You may take this option to onClick event rather than OnMouseover, which will take more advantage as this icon is very nearby to text box which is sure an accident for many one. Also rather than closing the same window with onMouseOut keep the close button as people dont like mouse cursor on text or presentation where they are looking around. As far the concept is very nice and interactive. First off, I think it works REALLY well! I can understand the criticism though because it does introduce inconsistency on your page. Sometimes you do expect the user to click, and in other parts of your interface you don't. I think the "i" would work just as well as clickable and would stop the "surprise" element just from scrolling the mouse over it. But it does all have a great look and feel.</i> Well, the original idea behind the auto-popup for the info button is to give the site viewers a simple and ease expression; they don't have to make the unnecessary click if they don't want to. It's also very true that viewers will get annoyed by accidentally hovering the INFO icon over and over. modified the auto popup information button according to the feedbacks that I got. any better suggestions? Regards,

Author

Message

Monday 20 August 2007 6:22:17 am

I just implemented AJAX techniques to allow user-friendly visual selection of mobile phones for use.
Check this out www.mobilemediacentre.nl/en/registration

http://i101.photobucket.com/albums/m44/DeooGi/SC-REGI-AJAX-1.png
http://i101.photobucket.com/albums/m44/DeooGi/SC-REGI-AJAX-1-2.png
http://i101.photobucket.com/albums/m44/DeooGi/SC-REGI-AJAX-2.png
http://i101.photobucket.com/albums/m44/DeooGi/SC-REGI-AJAX-3.png
http://i101.photobucket.com/albums/m44/DeooGi/SC-REGI-AJAX-4.png
http://i101.photobucket.com/albums/m44/DeooGi/SC-REGI-AJAX-5.png
http://i101.photobucket.com/albums/m44/DeooGi/SC-REGI-AJAX-6.png
http://i101.photobucket.com/albums/m44/DeooGi/SC-REGI-AJAX-7.png

Click on the cell phone icon, there will be an in-line popup.
I used GrayBox to do this. You can select the cell phone manufacturers on the left hand side, and choose your type of device in the middle frame. When the mouse hover the device image, product functionality and compatibility of the chosen device will be displayed on the right side under the device image.

All cell phone info is retrieved from database. After you selected the device, you will be linked back to the registration page and see which device you have chosen.

I have so far got some remarkable feedbacks:
<i>make the information popup only popup when it is clicked. (The i - image). Since an accidental hover may cause an unwanted popup. You could just use a tooltip saying, click for more info etc.

You may take this option to onClick event rather than OnMouseover, which will take more advantage as this icon is very nearby to text box which is sure an accident for many one. Also rather than closing the same window with onMouseOut keep the close button as people dont like mouse cursor on text or presentation where they are looking around. As far the concept is very nice and interactive.

First off, I think it works REALLY well!
I can understand the criticism though because it does introduce inconsistency on your page. Sometimes you do expect the user to click, and in other parts of your interface you don't.
I think the "i" would work just as well as clickable and would stop the "surprise" element just from scrolling the mouse over it.
But it does all have a great look and feel.</i>

Well, the original idea behind the auto-popup for the info button is to give the site viewers a simple and ease expression; they don't have to make the unnecessary click if they don't want to. It's also very true that viewers will get annoyed by accidentally hovering the INFO icon over and over.

modified the auto popup information button according to the feedbacks that I got. any better suggestions?

Regards,

eZ debug

Timing:	Jan 19 2025 00:31:07
Script start
Timing:	Jan 19 2025 00:31:07
Module start 'layout'
Timing:	Jan 19 2025 00:31:07
Module start 'content'
Timing:	Jan 19 2025 00:31:08
Module end 'content'
Timing:	Jan 19 2025 00:31:08
Script end

Main resources:

Total runtime	0.6740 sec
Peak memory usage	4,096.0000 KB
Database Queries	46

Timing points:

Checkpoint	Start (sec)	Duration (sec)	Memory at start (KB)	Memory used (KB)
Script start	0.0000	0.0061	588.1719	152.6563
Module start 'layout'	0.0061	0.0034	740.8281	39.5078
Module start 'content'	0.0095	0.6632	780.3359	417.3359
Module end 'content'	0.6727	0.0013	1,197.6719	8.0938
Script end	0.6740		1,205.7656

Time accumulators:

Accumulator	Duration (sec)	Duration (%)	Count	Average (sec)
Ini load
Load cache	0.0035	0.5241	16	0.0002
Check MTime	0.0014	0.2136	16	0.0001
Mysql Total
Database connection	0.0007	0.1099	1	0.0007
Mysqli_queries	0.6306	93.5556	46	0.0137
Looping result	0.0004	0.0628	44	0.0000
Template Total	0.6389	94.8	2	0.3194
Template load	0.0025	0.3669	2	0.0012
Template processing	0.6364	94.4215	2	0.3182
Template load and register function	0.0003	0.0442	1	0.0003
states
state_id_array	0.0007	0.0987	1	0.0007
state_identifier_array	0.0014	0.2113	2	0.0007
Override
Cache load	0.0021	0.3081	26	0.0001
Sytem overhead
Fetch class attribute can translate value	0.0007	0.0985	1	0.0007
Fetch class attribute name	0.0010	0.1555	1	0.0010
XML
Image XML parsing	0.0001	0.0158	1	0.0001
class_abstraction
Instantiating content class attribute	0.0000	0.0006	1	0.0000
General
dbfile	0.0007	0.1096	10	0.0001
String conversion	0.0000	0.0015	4	0.0000
Note: percentages do not add up to 100% because some accumulators overlap

Templates used to render the page:

Usage	Requested template	Template	Template loaded
1	node/view/full.tpl	full/forum_topic.tpl	extension/sevenx/design/simple/override/templates/full/forum_topic.tpl
1	content/datatype/view/ezxmltext.tpl	<No override>	extension/community_design/design/suncana/templates/content/datatype/view/ezxmltext.tpl
5	content/datatype/view/ezxmltags/line.tpl	<No override>	design/standard/templates/content/datatype/view/ezxmltags/line.tpl
5	content/datatype/view/ezxmltags/paragraph.tpl	<No override>	extension/ezwebin/design/ezwebin/templates/content/datatype/view/ezxmltags/paragraph.tpl
1	print_pagelayout.tpl	<No override>	extension/community/design/community/templates/print_pagelayout.tpl
Number of times templates used: 13 Number of unique templates used: 5

Time used to render debug report: 0.0001 secs