<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>&#8235;פשוט. שימושי &#187; צרכנות&#8236;</title>	<atom:link href="http://www.usable.co.il/archives/category/consumerism/feed" rel="self" type="application/rss+xml" />
	<link>http://www.usable.co.il</link>
	<description>&#8235;על אנשים, מחשבים, והמסכים שביניהם. שימושיות וממשק משתמש.&#8236;</description>	<lastBuildDate>Tue, 07 Sep 2010 07:36:35 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>he</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>&#8235;TicketNet: ברוכים הבאים לקוּפּה! עכשיו תתפשטו&#8236;</title>		<link>http://www.usable.co.il/archives/2010</link>
		<comments>http://www.usable.co.il/archives/2010#comments</comments>
		<pubDate>Fri, 06 Nov 2009 06:41:12 +0000</pubDate>
		<dc:creator>&#8235;barak&#8236;</dc:creator>				<category><![CDATA[ביקורות אתרים]]></category>
		<category><![CDATA[בית-הספר לשמישות]]></category>
		<category><![CDATA[חוויית המשתמש UX]]></category>
		<category><![CDATA[ממשק המשתמש UI]]></category>
		<category><![CDATA[צרכנות]]></category>

		<guid isPermaLink="false">http://www.usable.co.il/?p=2010</guid>
		<description><![CDATA[&#8235;לפני כמה חודשים כתבתי כאן על הכפתור ששווה 300 מיליון דולר, על חברה שלמדה עד כמה כואבות טעויות בממשק ה-checkout (תשלום על הזמנה), וכמה נעים בכיס כשמתקנים אותן. כתבתי גם על האתר של פסטיבל ישראל, שדרש ממני לזכור את הסיסמא שלי משנה שעברה כשבאתי לקנות כרטיסים, ואחרי שכבר הזנתי את פרטי האשראי שלי (!!!)
מסתבר שיש [...]&#8236;]]></description>			<content:encoded><![CDATA[<div dir="rtl"><p><a href="http://www.usable.co.il/archives/2010"><img class="alignright size-full wp-image-2019" style="border: 1px solid black; margin: 0pt 0pt 0pt 20px;" title="כרטיס" src="http://www.usable.co.il/wp-content/uploads/2009/11/ticket.gif" alt="כרטיס" width="108" height="81" /></a>לפני כמה חודשים כתבתי כאן על <a href="http://www.usable.co.il/archives/530">הכפתור ששווה 300 מיליון דולר</a>, על חברה שלמדה עד כמה כואבות טעויות בממשק ה-checkout (תשלום על הזמנה), וכמה נעים בכיס כשמתקנים אותן. כתבתי גם על <a href="http://www.usable.co.il/archives/771">האתר של פסטיבל ישראל</a>, שדרש ממני לזכור את הסיסמא שלי משנה שעברה כשבאתי לקנות כרטיסים, ואחרי שכבר הזנתי את פרטי האשראי שלי (!!!)</p>
<p>מסתבר שיש לא מעט חברות בארץ שעדיין לא מבינות שלקוח שיושב עם כרטיס אשראי ביד מול המסך לא ממש רוצה להירשם לשום דבר, לא רוצה ליצור קשר מתמשך עם האתר ולא מעוניין בשום מחוייבות אליו. הוא רוצה לשלם, לקבל אישור על התשלום ולהמשיך עם החיים שלו. האתר החדש של TicketNet עושה בדיוק את ההיפך.</p>
<p><span id="more-2010"></span></p>
<h2>שיחה דימיונית בקופת הקולנוע</h2>
<p>תארו לעצמכם שאתם הולכים לקולנוע, ומגיעים לקופה. דמיינו את השיחה הבאה:</p>
<p>- שלום, אנחנו רוצים שני כרטיסים ל&quot;לחנך את ג'ני&quot;</p>
<p>- תעודת זהות בבקשה.</p>
<p>- !?!?!?!</p>
<p>- אני מצטערת, בלי תעודת זהות אנחנו לא מאפשרים לרכוש כרטיסים.</p>
<p>- אי אפשר סתם לשלם לכם?</p>
<p>- לא.</p>
<p>- אופפפפפפפ&#8230;. טוב, הנה תעודת הזהות שלי</p>
<p>- טוב, עכשיו תגיד לי מה האימייל שלך, הטלפון, תן לי סיסמא, תן לי עוד פעם סיסמא, תסכים לתנאים של התקנון ואני אצור לך <strong>ארנק</strong>.</p>
<p>- !?!??! מה?</p>
<p>- תגיד לי מה האימייל שלך, הטלפון, תן לי סיסמא, תן לי עוד פעם סיסמא, תסכים לתנאים של התקנון ואני אצור לך <strong>ארנק</strong>.</p>
<p>- כן, שמעתי בפעם הראשונה, אבל מה הקטע של הארנק?</p>
<p>- אני חושבת שהסברתי את עצמי מצויין. אתה צריך שאגיד לך שוב?</p>
<p>- טוב, בסדר. הנה הפרטים (&#8230;), עכשיו אפשר לשלם?</p>
<p>- <strong>אבל אתה מסכים לתקנון?</strong></p>
<p>- מה כתוב בתקנון?</p>
<p>- אתה יכול לקרוא. הנה, יש פה חוברת, תקרא.</p>
<p>- אבל יש לי עוד דברים לעשות בחיים! אי אפשר בלי? מה כתוב שם?</p>
<p>- תקרא בתקנון.</p>
<p>- נו טוב, אני מסכים. אפשר כבר את הכרטיסים?</p>
<p>- לא, קודם פרטי אשראי בבקשה. או שאולי תרצה שנתחיל מהתחלה?</p>
<p>- למה שאני ארצה להתחיל מהתחלה?</p>
<p>- סתם, חשבתי.</p>
<p>- !?!?!?!? הנה פרטי האשראי שלי.</p>
<p>- הנה הכרטיסים, תהנו מהסרט!</p>
<h2>אותה שיחה, באתר TicketNet</h2>
<p>התהליך ב-TicketNet זהה לחלוטין למה שתיארתי.</p>
<h3>1. מגיעים לעמוד של הסרט, ובוחרים שעה</h3>
<p><a href="http://www.usable.co.il/wp-content/uploads/2009/11/ticketnet.gif"><img class="size-full wp-image-2011 alignnone" style="border: 1px solid black;" title="ticketnet" src="http://www.usable.co.il/wp-content/uploads/2009/11/ticketnet.gif" alt="ticketnet" width="571" height="161" /></a></p>
<h3>2. מזדהים בעזרת תעודת זהות</h3>
<p>שימו לב למטה לכפתור &quot;תזכורת סיסמא&quot; שמופיע פה למרות שאין פה בכלל אפשרות לסיסמא. תראו גם את הלשונית &quot;פרטי אמצעי תשלום&quot; שלחיצה עליה לא עושה שום דבר (אני יודע כי ניסיתי נואשות ללחוץ עליה).</p>
<p>אני לא יודע מה איתכם, אבל כשאני נותן את מספר תעודת הזהות שלי אני מרגיע <strong>ערום</strong>. אפשר להשיג הרבה מידע עלינו דרך מספר תעודת הזהות. קצת מוזר להרגיש ככה כשאנחנו בסך-הכל רוצים לשלם. לא? וזה הדבר הראשון שמבקשים מאיתנו?</p>
<p><img class="alignnone size-full wp-image-2012" style="border: 1px solid black;" title="תעודת זהות" src="http://www.usable.co.il/wp-content/uploads/2009/11/id.gif" alt="תעודת זהות" width="583" height="576" /></p>
<h3>3. פרטים ליצירת קשר, סיסמא, ודוא&quot;ל זבל</h3>
<p>שימו לב שאף אחד לא מסביר מה זה &quot;<strong>יצירת ארנק</strong>&quot;. כאילו שזה הדבר הכי ברור בעולם.</p>
<p>ודרך אגב, ההסכמה לתקנון גם תשלח לכם ספאם. זה כתוב בתקנון. <strong>אני קורא לאנשי טיקטנט להתעורר</strong>, אנחנו ב-2009, יש חוק להגנה מפני ספאם, וגם אם הוא מאפשר להסתיר את העובדה שיישלח ספאם עמוק בתוך התקנון, כשההרשמה היא חלק מתהליך רכישה, זה ממש לא לעניין.</p>
<p>הנה הקטע מתוך התקנון של טיקטנט:</p>
<blockquote><p>&quot;לתשומת ליבך: הרשמתך לאתר מהווה הסכמה להצטרפות לרשימת הדיוור של האתר, לרבות לצורכי משלוח הודעות בגין מבצעים והנחות באתר. שופמיינד בע&quot;מ מכבדת את פרטיותך ולפיכך אם אינך מעוניין לקבל הודעות על מבצעים והנחות מהאתר, תוכל לציין זאת במקום המיועד לכך במסגרת הודעות דואר אלקטרוני שתקבל בהקשר זה מהאתר על מבצעים והנחות באתר.&quot;</p></blockquote>
<p>כן, הבנתם נכון, עד שתקבלו את דוא&quot;ל הזבל הראשון, לא תוכלו לבטל את הרישום שלכם ברשימת התפוצה. אין שום מקום לבטל את הרישום באתר. זו כבר עבירה על החוק, אם אני מבין נכון את הפרשנות של <span class="text14"><span lang="he"><a href="http://www.ynet.co.il/articles/1,7340,L-3633976,00.html" target="_blank">עו&quot;ד אביב אילון ב-ynet</a>. הוא כותב ספציפית על מקרה כזה: &quot;על המפרסם לאפשר ביטול ההסכמה בכל שלב.&quot; </span></span></p>
<p><span class="text14"><span lang="he">ממש עושה חשק לקנות, נכון?<br />
</span></span></p>
<p><img class="alignnone size-full wp-image-2014" style="border: 1px solid black;" title="פרטי קשר" src="http://www.usable.co.il/wp-content/uploads/2009/11/arnak1.gif" alt="פרטי קשר" width="591" height="395" /></p>
<h3>4. משלמים והולכים. או שאולי נחזור להתחלה?</h3>
<p>אפילו כאן הצליחו בטיקטנט לירות לעצמם ברגליים. המשתמש עבר את כל המשוכות עד פה. אז עכשיו הדבר הנכון להציע לו הוא &#8230; <strong>החלפת משתמש</strong>??? לחיצה על הכפתור הזה תוביל אתכם חזרה <strong>לתחילת התהליך</strong>. למה להכשיל את הקונה האומלל ולגרום לטיקטנט, אולי, לאבד קונה? מה הסיכוי שמישהו באמת נזכר בנקודה הזאת שהוא בעצם מישהו אחר?</p>
<p><img class="alignnone size-full wp-image-2015" style="border: 1px solid black;" title="פרטי אשראי" src="http://www.usable.co.il/wp-content/uploads/2009/11/credit.gif" alt="פרטי אשראי" width="583" height="371" /></p>
<h2>המלצות</h2>
<p>רוצים שיותר אנשים יקנו באתרים שלכם? אני ממליץ על הכללים הבאים:</p>
<ol>
<li>בקשו מהקונים <strong>רק</strong> את המידע שאתם חייבים לקבל בשביל לבצע את הפעולה.אחרי שקיבלתם את פרטי האשראי וסיימתם את העיסקה, בקשו מהם מידע נוסף &#8211; אם הוא נחוץ לכם. כך לא תעצרו אנשים מלשלם לכם.</li>
<li>רוצים שאנשים ירשמו לאתר כדי שלא יצטרכו להזין את הפרטים שוב בפעם הבאה? רעיון יפה, אבל עם כל הכבוד, התשלום שלהם יותר חשוב. תנו להם אפשרות, <strong>אחרי </strong>שהם משלמים, לתת אימייל (אם עוד לא נתנו) וסיסמא. בוודאי שלא תעודת זהות (אישי מדי!) וגם לא שם משתמש. גם ככה בקושי זוכרים את הסיסמא.</li>
<li>אותו משתמש חזר לאתר בשביל לקנות שוב? אם הוא זוכר את הסיסמא, או שנרשם אי-פעם, תְפָדַל, שיכניס את הפרטים וייכנס. אבל תנו לו גם את האפשרות להזין את כל המידע שלו שוב. רק שישלם. באותו פוסט על <a href="http://www.usable.co.il/archives/530">הכפתור ששווה 300 מיליון</a> הזכרתי ש-75% מהמבקרים באותו אתר שמתואר בפוסט לא חזרו לקנות אחרי &quot;שחזור סיסמא&quot; שנשלח באימייל. 75%! אתם באמת רוצים להפסיד את כל הכסף הזה?</li>
<li>
<div id="attachment_2016" class="wp-caption alignleft" style="width: 152px"><a href="http://www.ilimudim.co.il/GUI/Index/ShowInstitute.aspx?ID=240&amp;CategoryID=218" target="_blank"><img class="size-full wp-image-2016 " style="border: 1px solid black;" title="אישור תקנון וספאם ב-iLimudim" src="http://www.usable.co.il/wp-content/uploads/2009/11/ilimudim.png" alt="ilimudim" width="142" height="52" /></a><p class="wp-caption-text">אישור תקנון וספאם ב-iLimudim</p></div>
<p>אתם מחייבים את המשתמש להירשם לרשימת התפוצה כחלק מתהליך הרכישה? זה כנראה חוקי במקרים מסויימים, אבל לא ממש נעים. לפחות תגידו את זה בצורה ישירה, כמו שעשו באתר <a href="http://www.ilimudim.co.il/GUI/Index/ShowInstitute.aspx?ID=240&amp;CategoryID=218" target="_blank">iLimudim</a>.</li>
</ol>
<p><strong>בהצלחה!</strong></p>
</div>]]></content:encoded>			<wfw:commentRss>http://www.usable.co.il/archives/2010/feed</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>&#8235;איך להפסיד כסף: שיעור בחינם מפסטיבל ישראל&#8236;</title>		<link>http://www.usable.co.il/archives/771</link>
		<comments>http://www.usable.co.il/archives/771#comments</comments>
		<pubDate>Sat, 02 May 2009 17:58:38 +0000</pubDate>
		<dc:creator>&#8235;barak&#8236;</dc:creator>				<category><![CDATA[ביקורות אתרים]]></category>
		<category><![CDATA[חוויית המשתמש UX]]></category>
		<category><![CDATA[ממשק המשתמש UI]]></category>
		<category><![CDATA[צרכנות]]></category>

		<guid isPermaLink="false">http://www.usable.co.il/?p=771</guid>
		<description><![CDATA[&#8235;לפני כמה שבועות כתבתי כאן על הכפתור ששווה 300 מיליון דולר &#8211; על איך ששינוי בטופס ההרשמה לאתר מסחר ברשת הניב גידול עצום במכירות. הנקודה העיקרית של מי ששינה את עיצוב הטופס היתה, שלקוחות שבאים לקנות לא מעוניינים להירשם לאתר ולבנות איתו מערכת יחסים. הם רוצים רק לקנות, גם במחיר של מילוי חוזר של פרטים [...]&#8236;]]></description>			<content:encoded><![CDATA[<div dir="rtl"><p><a href="http://www.usable.co.il/archives/771/" target="_self"><img class="alignright size-full wp-image-783" style="margin-top: 10px; margin-bottom: 10px; margin-left: 20px;" title="כסף נשרף" src="http://www.usable.co.il/wp-content/uploads/2009/05/thumb1.jpg" alt="thumb1" width="118" height="58" /></a>לפני כמה שבועות כתבתי כאן על <a href="http://www.usable.co.il/archives/530">הכפתור ששווה 300 מיליון דולר</a> &#8211; על איך ששינוי בטופס ההרשמה לאתר מסחר ברשת הניב גידול עצום במכירות. הנקודה העיקרית של מי ששינה את עיצוב הטופס היתה, שלקוחות שבאים לקנות לא מעוניינים להירשם לאתר ולבנות איתו מערכת יחסים. הם רוצים רק לקנות, גם במחיר של מילוי חוזר של פרטים אישיים.</p>
<p>כשקניתי השבוע כרטיסים לפסטיבל ישראל, נתקלתי באותה הטעות לזאת שהיתה בטופס ההוא (לפני שתוקן), רק שבפסטיבל ישראל עשו את הטעות בגדול. מה זה בגדול, <strong>בענק!</strong></p>
<p><strong></strong><span id="more-771"></span></p>
<h2>כמה מילים על הפסטיבל</h2>
<p>זה כבר כמה שנים שאני הולך למופעים ב<a href="http://www.israel-festival.org.il/" target="_blank">פסטיבל ישראל</a>. מעבר למופעים עצמם, שרבים מהם מצויינים (אזכיר את &quot;<a href="http://yonirechter.net/albums/album_romantica.html" target="_blank">העיקר זה הרומנטיקה</a>&quot; הוותיק &#8211; יוני רכטר וחברים, ואת &quot;<a href="http://www.tapuz.co.il/blog/ViewEntry.asp?EntryId=1292850&amp;passok=yes" target="_blank">דבקה פנטזיה</a>&quot; הנפלא שהייתי בו בשנה שעברה), יש גם אווירה נהדרת וכל מיני הופעות חינמיות כיפיות מחוץ לאולמות של תאטרון ירושלים.</p>
<div id="attachment_772" class="wp-caption alignnone" style="width: 500px"><img class="size-full wp-image-772" title="מופע רחוב" src="http://www.usable.co.il/wp-content/uploads/2009/05/street.jpg" alt="בפסטיבל יש הרבה מופעי רחוב מצויינים" width="490" height="270" /><p class="wp-caption-text">בפסטיבל יש הרבה מופעי רחוב מצויינים</p></div>
<h2>קונים כרטיסים לפסטיבל</h2>
<p>גם השנה החלטתי לקנות כרטיסים. ישבתי עם זוגתי ובחרנו ביחד מופעים ומושבים. תהליך בחירת הכרטיסים היה די מוצלח, אגב, אבל ספק אם הייתי מצליח להשלים אותו בלי החוברת המודפסת שנשלחה לי בדואר: <a href="http://www.israel-festival.org.il/2009/list.html">אתר המידע של הפסטיבל</a> די קשה ולא נוח לשימוש, ולעתים גם לא מאוד אסתטי.</p>
<p>אחרי שסיימתי עם בחירת הכרטיסים קיבלתי את מסך עגלת הקניות (זה לא המופע שבו בחרתי, אגב):</p>
<p><img class="alignnone size-full wp-image-773" style="border: 1px solid black;" title="עגלת הקניות" src="http://www.usable.co.il/wp-content/uploads/2009/05/fest1.jpg" alt="עגלת הקניות" width="600" height="352" /></p>
<p>לחיצה על השלמת ההזמנה מביא למסך שבו מזינים פרטים אישיים.</p>
<p><img class="alignnone size-full wp-image-775" style="border: 1px solid black;" title="פרטים אישיים" src="http://www.usable.co.il/wp-content/uploads/2009/05/fest22.jpg" alt="פרטים אישיים" width="600" height="437" /></p>
<p>יש במסך הזה אפשרות להזין כתובת אימייל וסיסמה, שהתעלמתי ממנה. לא זכרתי שקניתי דרך האתר ב-2008, ובכל מקרה &#8211; זה היה פסטיבל 2008, ועכשיו זה פסטיבל 2009, לא חשבתי שהפרטים שלי נשמרו, ולא רציתי להתחיל להתעסק עם האמייל. נראה היה שאפשר בזריזות להקיש את כל הפרטים שדרושים, וזה בדיוק מה שעשיתי.</p>
<p>שימו לב שאם עוקבים אחרי המסלול שהטופס מתווה (<a href="http://www.usable.co.il/archives/530">המסלול להשלמת הטופס</a> &#8211; כתבתי עליו פה בפוסט קודם) <strong>מגיעים בקו ישר לכפתור &quot;ניקוי&quot;</strong>, <strong>ולא ל&quot;השלמת ההזמנה&quot;</strong>. היה רצוי להפוך את הסדר שלהם כדי לא להכשיל את המשתמשים בטופס, שפעמים רבות לוחצים פשוט על הכפתור הראשון שהעין רצה אליו, ולא קוראים בכלל מה כתוב עליו.</p>
<p>אחרי לחיצה על &quot;השלמת ההזמנה&quot; מגיעים למסך להזנת פרטי אשראי. הזנתי את הפרטים:</p>
<p><img class="alignnone size-full wp-image-778" style="border: 1px solid black;" title="fest3" src="http://www.usable.co.il/wp-content/uploads/2009/05/fest3.jpg" alt="fest3" width="600" height="290" /></p>
<p>שימו לב, שבשלב הזה <strong>יש בידי האתר את כל הפרטים כדי לבצע את העסקה, כולל פרטי אשראי</strong>!<strong> </strong>אמנם רק 365 ש&quot;ח, אבל עדיין עסקה (אותו הדבר קורה גם בעסקאות גדולות יותר, כמובן).</p>
<p>לוחצים על אישור, ומה מקבלים? <strong>אכזבה! </strong>מסך שגיאה:<strong><br />
</strong></p>
<p><img class="alignnone size-full wp-image-779" style="border: 1px solid black;" title="אכזבה!" src="http://www.usable.co.il/wp-content/uploads/2009/05/fest4.jpg" alt="אכזבה!" width="444" height="135" /></p>
<p>מסתבר שלאתר שפסטיבל ישראל יותר חשוב שתכנסו לחשבון שלכם בצורה מסודרת, ולא תשלמו להם סתם ככה כמו פראי-אדם, מאשר לקחת מכם כסף. אז מה אם הפסטיבל קורה רק פעם בשנה &#8211; בבקשה לזכור את הסיסמה, או לבקש אותה כשאתם באים לקנות. מה זה, קרקס? זה פסטיבל תרבותי פה! כנראה שהכסף על הכרטיסים לא הולך למעצבי האתר&#8230;</p>
<p>בשביל להגיע ללינק &quot;שכחתי סיסמה&quot; ממסך השגיאה הזה, צריך לחזור לבד למסך של הפרטים האישיים, אין שום לינק אליו. תסתדרו לבד. אם כבר בוחרים לאלץ את המשתמשים להכנס לחשבון שלהם, כפי שנעשה כאן, היה אפשר כבר בנקודה הזאת (מסך השגיאה) לשלוח סיסמה בדואר אוטומטית, לתת למשתמש הודעה מתאימה ולאפשר לו להזין את הסיסמה שנשלחה בתוך חלון השגיאה עצמו.</p>
<p>הטעות הזאת לא עולה לפסטיבל 300 מיליון דולר, אני בטוח. סביר להניח שמי שכבר הצליח להזמין מהאתר, ימצא איפה ללחוץ &quot;שכחתי סיסמה&quot;, ייכנס לחשבון ויזמין בכל מקרה. זה לא כאילו יש לו אלטרנטיבות, לפחות ברשת, זה האתר היחיד לכרטיסים לפסטיבל. אבל אולי כשיגיע להזמין בטלפון או במשרד כרטיסים (כי הוא לא הצליח באתר) לא יזכור את כל המופעים שמצא באתר, ויזמין פחות? וכמה כסף שווה התסכול שלו מהתהליך?</p>
<p>בכל מקרה, זאת דוגמא מצויינת לעיצוב שגוי שמונחה, כפי הנראה, משיקולי התוכנה (שדורשת לא ליצור שני חשבונות לאותה כתובת אימייל) ולא משיקולי חוויית השימוש באתר. מי שמבקר באתר הזה רוצה רק לשלם ולקבל אישור על הרכישה באימייל, ולא אכפת לו בכלל מהחשבון שלו באתר &quot;פסטיבל ישראל&quot;. כל עוד הוא מקבל את הכרטיסים שלו, כל השאר לא חשוב.</p>
<p>אגב, את הכרטיסים עצמם, לפסטיבל ישראל <strong>2009</strong>, אפשר לקבל רק בדואר או בקופה (ולא באימייל או באתר, למשל).</p>
<h2>טיפים והמלצות</h2>
<ul>
<li>אל תאלצו את המשתמשים להירשם לאתר שלכם כדי לקנות ממנו (או לכל פעולה אחרת) &#8211; המבקרים באתר רוצים רק לקבל את השירות שהוא מספק, ולא לבנות איתו קשר ארוך-טווח.</li>
<li>תשתדלו לתת למשתמש אפשרות להזין את הפרטים הנחוצים ולהשלים את הפעולה, גם בלי להירשם לאתר.</li>
<li>הרשמה לאתר נתפסת אצל רבים כנתינת פתח לאתר לשלוח דואר זבל (spam), ואף אחד לא מעוניין בזה. אם אתם מוכרחים לבצע רישום של המשתמש, הבהירו מוקדם ככל האפשר שלא תשתמשו בפרטים שלו לשליחת דואר זבל.</li>
<li>לעוד טיפים בנושא הזה ועל עיצוב טפסים בכלל, ב<a href="http://www.usable.co.il/archives/530">סדרת הפוסטים על עיצוב טפסים</a>.</li>
</ul>
</div>]]></content:encoded>			<wfw:commentRss>http://www.usable.co.il/archives/771/feed</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>&#8235;איך מעצבים טפסים (חלק 1 מתוך 4), והכפתור ששווה 300 מיליון דולר&#8236;</title>		<link>http://www.usable.co.il/archives/530</link>
		<comments>http://www.usable.co.il/archives/530#comments</comments>
		<pubDate>Sat, 04 Apr 2009 14:19:38 +0000</pubDate>
		<dc:creator>&#8235;barak&#8236;</dc:creator>				<category><![CDATA[בית-הספר לשמישות]]></category>
		<category><![CDATA[חוויית המשתמש UX]]></category>
		<category><![CDATA[ממשק המשתמש UI]]></category>
		<category><![CDATA[צרכנות]]></category>

		<guid isPermaLink="false">http://www.usable.co.il/?p=530</guid>
		<description><![CDATA[&#8235;המילה &#34;טפסים&#34; מיד מעוררת פיהוק. בדמיון עולה תמונה של דפים מצהיבים במשרד מממשלתי מאובק, ופקידה שאומרת &#34;זה לא אני, זה פופטיץ&#34; (כל הזכויות שמורות ל&#34;זהו זה&#34;). אבל כשמדובר בטפסים באתר או בתוכנה שלכם, הם הרבה יותר מבדיחה נוסטלגית. טפסים הם הדרך שלכם ליצור שיחה עם המבקרים באתר, וכשהם נעשים בצורה לא נכונה, התוצאות עשויות להיות [...]&#8236;]]></description>			<content:encoded><![CDATA[<div dir="rtl"><p style="text-align: right;" dir="rtl"><a href="http://www.usable.co.il/archives/530"><img class="alignright size-full wp-image-535" style="border: 1px solid Lightgray; margin-left: 20px;" title="טופס" src="http://www.usable.co.il/wp-content/uploads/2009/04/form.jpg" alt="form" width="118" height="156" /></a>המילה &quot;טפסים&quot; מיד מעוררת פיהוק. בדמיון עולה תמונה של דפים מצהיבים במשרד מממשלתי מאובק, ופקידה שאומרת <a href="http://www.youtube.com/watch?v=zsmlXF1MQ3A" target="_blank">&quot;זה לא אני, זה פופטיץ&quot;</a> (כל הזכויות שמורות ל&quot;זהו זה&quot;). אבל כשמדובר בטפסים באתר או בתוכנה שלכם, הם הרבה יותר מבדיחה נוסטלגית. טפסים הם הדרך שלכם ליצור שיחה עם המבקרים באתר, וכשהם נעשים בצורה לא נכונה, התוצאות עשויות להיות קשות, גם בהפסד של <span style="color: #008000;">$$$</span>. נראה טופס אחד שבו תיקון קטן הניב רווחים גדולים מאוד, וכמה עקרונות שכדאי להתייחס אליהם בעיצוב טפסים (פוסט 1 מתוך 3).</p>
<h4 dir="rtl" style="margin-top:50px"><span style="color: #008000;"><strong>עדכון 6/6/2009 &#8211; </strong></span>קישורים לכל הפוסטים בסידרה:</h4>
<p><a href="http://www.usable.co.il/archives/530">חלק ראשון</a> (הפוסט הזה): זרימה בטופס ויישור תוויות.</p>
<p><a href="http://www.usable.co.il/archives/632">חלק שני</a>: עזרה והסברים, ובדיקות <span style="text-align: right;">תקינוּת</span> (<span style="text-align: right;">וָלידציות</span>).</p>
<p><a href="http://www.usable.co.il/archives/840">חלק שלישי</a>: פעולה ראשית ופעולות משניות, ומספר השדות בטופס.</p>
<p><a href="http://www.usable.co.il/archives/913" target="_self">חלק רביעי</a>: תלויות בין שדות, ורשימת קריאה מומלצת.</p>
<p style="text-align: right;" dir="rtl">
<p><span id="more-530"></span></p>
<h2 style="margin-top: 60px; text-align: right;">הכפתור ששווה 300 מיליון דולר</h2>
<p style="text-align: right;">מה לא בסדר בתמונה הבאה:</p>
<p><img style="border: 1px solid;" title="הכפתור ששווה 300 מיליון דולר: לפני" src="http://www.usable.co.il/wp-content/uploads/2009/04/login_register.png" alt="login_register" width="502" height="228" /></p>
<p>נראה די סטנדרטי, לא? הבעיה של המסך הזה היא בכך שהוא מופיע מיד אחרי מסך עגלת הקניות (Shopping Cart), אחרי שלחצו על הכפתור &quot;להזמנה ותשלום&quot; (Checkout). אחרי שבוצע במסך התיקון הבא, המכירות באתר גדלו ב-45%, תוספת של 300 מיליון דולר:</p>
<p><img style="border: 1px solid;" title="הכפתור ששווה 300 מיליון דולר: אחרי" src="http://www.usable.co.il/wp-content/uploads/2009/04/login_register2-copy.gif" alt="login_register2-copy" width="502" height="228" /></p>
<h5>(צילום המסך הראשון לקוח <a href="http://www.rawseo.com/news/2009/03/11/the-300-million-dollar-button/" target="_blank">מכאן</a>, השני הוא פרשנות שלי על <a href="http://www.uie.com/articles/three_hund_million_button/" target="_blank">הטקסט שתיאר את הבעיה והתיקון</a>)</h5>
<p>עיקר השינוי היה בכפתור ה&quot;<strong>Register</strong>&quot; שהפך ל-&quot;<strong>Continue</strong>&quot;. הוסיפו גם מתחת לכפתור קצת טקסט.</p>
<p>המחשבה של מעצבי הטופס המקורי היתה ששם משתמש וסיסמא יקל על לקוחות חוזרים להזמין מהאתר, כי הם לא יצטרכו להקליד את הפרטים שלהם שוב ושוב. לכן הם שמו את הכניסה לאתר במקום בולט &#8211; בראש הדף, בצד שמאל. לעומת זאת, המחקר שבדק את האתר ובעקבותיו נעשה השינוי, גילה שרוב המשתמשים באתר מסחר אלקטרוני לא רוצים מערכת יחסים עם האתר; הם רוצים לקנות, ולהמשיך הלאה עם החיים שלהם. לכן אין להם בכלל עניין להכניס את הפרטים שלהם ולקבל שם משתמש וסיסמא קבועים.</p>
<p>מה שקרה בדף הזה היה, שרוב האנשים נעצרו בו עם תהליך הרכישה, ופשוט המשיכו לאתר אחר כדי לרכוש את אותם מוצרים. בין אם כי הם לקוחות חוזרים ושכחו את הסיסמא שלהם, ובין אם הם נרתעו מההרשמה לאתר (למשל, כי חששו שיקבלו דוא&quot;ל זבל אם ייתנו את האימייל שלהם), הם פשוט העדיפו ללכת למקום אחר. וזה אחרי שהם כבר בחרו את המוצרים, שמו אותם בעגלת הקניות, והיו מוכנים לשלם!</p>
<p>עוד נתון מעניין מהמחקר היה, שמתוך 160,000 מבקרים ביום שביקשו לשחזר את הסיסמא (&quot;Forgot your login information? Click here&quot;), כ-75% לא חזרו להשלים את הקנייה. אותי הנתון הזה די הדהים, באופן אישי.<br />
<a name="why"></a></p>
<h2>למה טפסים הם דבר חשוב</h2>
<p>ראינו דוגמא אמיתית אחת, שמראה בצורה ברורה למה כל-כך חשוב להשקיע תשומת לב בטפסים. טפסים משמשים למגוון צרכים:</p>
<ul>
<li>דו-שיח: שיחה מקוונת עם לקוחות החברה</li>
<li>מידע: איסוף מידע ממבקרים באתר</li>
<li>מסחר: מכירה של מוצרים</li>
</ul>
<p>לפחות אחד מהדברים האלה חשובים לכל אתר ברשת, כמעט. אז איך מעצבים טפסים? נציג כאן ובפוסטים הבאים כמה דברים שחשוב להכיר ולשים אליהם לב בתכנון טופס.</p>
<h2>המסלול להשלמת הטופס</h2>
<p>הדבר הראשון שמטריד את מי שמגיע לטופס ברשת הוא, &quot;מה אני צריך לעשות בטופס הזה?&quot;, או במילים אחרות &#8211; מה אני חייב לעשות כדי לסיים עם הטופס הזה ולהמשיך הלאה. יש טפסים שבהם לא כל-כך פשוט להבין מה צריך לעשות. מכשול אחד יכול להיות <strong>מסלול לא ברור או מסובך להשלמת הטופס</strong>. קחו לדוגמא את הטופס שמופיע כאן (מתוך <a href="https://www.toto.org.il/newuser.asp" target="_blank">אתר הטוטו</a>).</p>
<h5>(הכפתור הצהוב הזה, אגב, לא שווה אפילו דולר אחד <img src='http://www.usable.co.il/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' />  הוא חינמי)</h5>
<p><object width="600" height="500" data="http://www.usable.co.il/wp-content/uploads/2009/04/flow.swf" type="application/x-shockwave-flash"><param name="name" value="flow" /><param name="bgcolor" value="#ffffff" /><param name="align" value="middle" /><param name="src" value="http://www.usable.co.il/wp-content/uploads/2009/04/flow.swf" /><param name="allowfullscreen" value="false" /><param name="quality" value="high" /></object></p>
<p style="margin-top:30px">מסחרר קצת, לא? אם לא די בזה שהמשתמש צריך להקליד שפע של מידע, הדרך להשלמת הטופס סבוכה ומבלבלת.</p>
<p style="margin-top:30px">שימו לב מה המעצב עשה בתחתית הטופס כדי <strong>להפחיד </strong>את המשתמשים שלו.</p>
<p style="margin-top:30px"><img style="border: 1px solid;" title="כפתור &quot;נקה&quot;" src="http://www.usable.co.il/wp-content/uploads/2009/04/nake.jpg" alt="כפתור &quot;נקה&quot;" width="266" height="126" /></p>
<p style="margin-top:30px">ממש מתחת לתיבת הטקסט של האבטחה ( captcha), מופיע כפתור &quot;נקה&quot;, והנטייה האוטומטית היא ללחוץ על הכפתור שנמצא מתחת לתיבה. תארו לעצמכם שמילאתם את כל הטופס המייגע הזה, ואז לחצתם על הכפתור הלא נכון; כל מה שהקלדתם נמחק. לזכות המעצב יאמר, שהדף שואל את המשתמש אם הוא אכן רוצה למחוק את המידע, לפני שהוא עושה את זה. אבל היה אפשר לחסוך בכלל את החוויה הזו מהמשתמשים, אם הכפתור &quot;הרשם&quot; ו&quot;נקה&quot; היו מתחלפים.</p>
<p style="margin-top:30px">תשוו את הטופס הקודם, עם הזרימה של הטופס הזה (מתוך <a href="http://www.tcm-yadsarah.org/index.aspx?id=1685" target="_blank">אתר יד שרה</a>):</p>
<p><object width="514" height="695" data="http://www.usable.co.il/wp-content/uploads/2009/04/flow2.swf" type="application/x-shockwave-flash"><param name="name" value="flow2" /><param name="bgcolor" value="#ffffff" /><param name="align" value="middle" /><param name="src" value="http://www.usable.co.il/wp-content/uploads/2009/04/flow2.swf" /><param name="allowfullscreen" value="false" /><param name="quality" value="high" /></object></p>
<p>כאן המסלול אל סוף הטופס ברור &#8211; בקו ישר למטה. טופס כזה יהיה הרבה יותר קל למילוי, אף-על פי שהוא תופס יותר מקום לגובה, ודורש גלילה למטה כדי להגיע אל סופו.</p>
<p>חשוב להקפיד על מסלול פשוט וברור בטפסים, אם רוצים שהמבקרים באתר יצליחו למלא אותם, ובמהירות.</p>
<h2>יישור תוויות</h2>
<p>בטפסים יש לכל שדה (מקום שבו מכניסים מידע) תווית שמתארת אותו. היישור של התווית, כלומר איפה היא ממקומת ביחס לשדה, משפיע באופן ישיר על הזמן שלוקח למשתמש למלא את הטופס. למשל, כשהתווית רחוקה מהשדה, המשתמש צריך להפנות את המבט הצידה כדי לקרוא אותה, ואחר-כך שוב להפנות את המבט כדי למלא את השדה, וכך הלוך ושוב כמה פעמים עד שהוא ממלא את התשובה ועובר לשדה הבא. כשהתווית ממש קרובה, לצידו או מעליו, הוא יכול לקרוא אותה בזמן שהוא ממלא את התשובה. הצמדה של התווית לשדה יכולה לחסוך 50% מזמן מילוי הטופס, ואפילו יותר מכך!</p>
<h3>יישור ימני &#8211; רחוק מהשדה</h3>
<h3><img class="size-full wp-image-571 alignleft" style="margin-right: 25px; border: 1px solid;" title="right-align" src="http://www.usable.co.il/wp-content/uploads/2009/04/right-align.jpg" alt="right-align" width="271" height="174" /></h3>
<p>יישור ימני בעברית (כמו יישור שמאלי באנגלית) גורם להאטה במילוי הטופס, בגלל שהתווית רחוקה מהשדה, כפי שתארתי כאן למעלה.</p>
<p>איטיות היא לא תמיד דבר רע! למשל, כשאנחנו רוצים שהמשתמש יתעכב על מילוי השדות, וישים לב מה אנחנו שואלים אותו, יישור ימני ישיג את המטרה הזו. אם המידע שאנחנו רוצים לשאול הוא לא שגרתי, למשל, אנחנו עשויים לרצות להאט אותו. לעומת זאת, אם המידע המבוקש הוא שם וכתובת, כנראה שנרצה שהמשתמש יסיים איתו כמה שיותר מהר, ואז יישור ימני הוא לא המתאים ביותר.</p>
<p>ייתרון משמעותי ביישור ימני, הוא שקל יותר לסרוק את התוויות בטופס כדי למצוא תווית ספציפית. אם הטופס משמש לעריכה, והמשתמש רוצה רק לעדכן שדה ספציפי, יישור ימני יעזור לו לאתר את השדה המבוקש במהירות. אם הוא מזין מידע בטופס ריק, ייתרון הסריקה לא יהיה משמעותי (הוא צריך לעבור כל הטופס בכל מקרה), והיישור הימני רק יאט אותו.</p>
<h3>יישור שמאלי &#8211; קרוב לשדה</h3>
<p><img class="alignleft size-full wp-image-576" style="margin-right: 25px; border: 1px solid;" title="left-align" src="http://www.usable.co.il/wp-content/uploads/2009/04/left-align.jpg" alt="left-align" width="428" height="176" /></p>
<p>יישור שמאלי בעברית (כמו יישור ימני באנגלית), מאיץ את מילוי הטופס. המשתמש יכול לקשר בקלות בין התווית לשדה, ולא צריך להסתכל הלוך ושוב על התווית והשדה כשהוא ממלא את הטופס. ניסויים שונים הראו שיישור שמאלי, קרוב לשדה, מביא למילוי טופס עד פי 2 יותר מהר מיישור ימני!</p>
<p>החסרון הגדול של יישור שמאלי, הוא שקשה יותר לסרוק את הטופס כדי למצוא תווית ספציפית.</p>
<h3>יישור עליון &#8211; מעל השדה</h3>
<h3><img class="alignleft size-full wp-image-578" style="margin-right: 25px; border: 1px solid;" title="top-align" src="http://www.usable.co.il/wp-content/uploads/2009/04/top-align.jpg" alt="top-align" width="337" height="226" /></h3>
<p>יישור עליון מאיץ עוד יותר את מילוי הטופס. אומנם לא בצורה דרמטית כמו יישור שמאלי לעומת יישור ימני, אבל עדיין &#8211; הוא מהיר יותר מכל השיטות האחרות. הסיבה היא שהעין יכולה לקלוט גם את התווית וגם את תוכן השדה במבט אחד. ביישור שמאלי, למשל, הם רחוקי מדי אחד מהשני כדי שזה ייקרה.</p>
<p>החסרון העיקרי של יישור עליון הוא שהוא דורש יותר מקום אנכי על הדף, ולכן גם עשוי לגרום לגלילה, במקומות שבהם שיטת יישור אחרת לא תדרוש את זה.</p>
<p>שימו לב שבדוגמא שצירפתי, יש שימוש לא נכון בסימן הכוכבית, שמציין בדרך כלל שדה חובה (שדה שחייבים למלא בטופס). השימוש הנכון הוא משמאל לשם (בעברית), ובד&quot;כ צבע הכוכבית הוא גוון של אדום.</p>
<p>עוד על בדיקות (validations), שדות חובה וטיפים נוספים - <strong>בפוסטים</strong> <strong>הבאים. </strong></p>
<p><a href="http://www.usable.co.il"></a></p>
<h2>שיעורי בית (העשרה לחרוצים)</h2>
<ul>
<li>הרבה ממה שכתוב פה וגם בפוסטים בהמשך, תרגמתי <a href="http://www.lukew.com/ff/entry.asp?794" target="_self">מהרצאה מעולה של Luke Wroblewski</a>. אם יש לכם 74 דקות פנויות, מומלץ בחום!</li>
<li>הבחור מההרצאה הזו <a href="http://www.lukew.com/ff/entry.asp?794" target="_self">פירסם ספר</a> על טפסים שטרם קראתי. <a href="http://www.amazon.com/Web-Form-Design-Filling-Blanks/dp/1933820241">באמזון</a> הוא מקבל ביקורות טובות, וגם בתעשיה.</li>
<li><a href="http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/">כתבה עם הרבה טיפים</a> על טפסי הרשמה לאתר, אם החלטתם לעשות כאלה למרות הסיפור של ה-300 מיליון דולר למעלה.</li>
</ul>
<p><span style="color: #008000;"><strong><br />
</strong></span></p>
</div>]]></content:encoded>			<wfw:commentRss>http://www.usable.co.il/archives/530/feed</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
	</channel>
</rss>
