<?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/ux/feed" rel="self" type="application/rss+xml" />
	<link>http://www.usable.co.il</link>
	<description>&#8235;על אנשים, מחשבים, והמסכים שביניהם. שימושיות וממשק משתמש.&#8236;</description>	<lastBuildDate>Tue, 27 Sep 2011 07:49:12 +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;למשרד הפנים אין סניפים&#8236;</title>		<link>http://www.usable.co.il/archives/3526</link>
		<comments>http://www.usable.co.il/archives/3526#comments</comments>
		<pubDate>Tue, 08 Feb 2011 07:22:10 +0000</pubDate>
		<dc:creator>&#8235;barak&#8236;</dc:creator>				<category><![CDATA[בית-הספר לחוויית משתמש]]></category>
		<category><![CDATA[שמישות (שימושיות)]]></category>
		<category><![CDATA[שמישות כמקצוע]]></category>

		<guid isPermaLink="false">http://www.usable.co.il/?p=3526</guid>
		<description><![CDATA[&#8235;או לפחות כך נדמה מהאתר של המשרד.
אני שואל אתכם: האם זה הגיוני שבשנת 2011 לא יהיה מקום ברור באתר של משרד הפנים שאפשר למצוא בו את רשימת הסניפים של המשרד ברחבי הארץ ואת שעות הפתיחה שלהם?
האם זה סביר שאי אפשר יהיה לשלוח פניה למנהל האתר דרך האתר עצמו?
מיכל, אשתי, רצתה ללכת למשרד הפנים כדי לעדכן [...]&#8236;]]></description>			<content:encoded><![CDATA[<div dir="rtl"><p><a title=" " href="http://www.usable.co.il/archives/3526"><img class="size-full wp-image-3527 alignright" style="margin-left: 20px;" title="משרד הפנים" src="http://www.usable.co.il/wp-content/uploads/2011/02/pnim.jpg" alt="" width="108" height="108" /></a>או לפחות כך נדמה <a href="http://www.moin.gov.il" target="_blank">מהאתר של המשרד</a>.</p>
<p>אני שואל אתכם: האם זה הגיוני שבשנת 2011 לא יהיה מקום ברור באתר של משרד הפנים שאפשר למצוא בו את רשימת הסניפים של המשרד ברחבי הארץ ואת שעות הפתיחה שלהם?</p>
<p>האם זה סביר שאי אפשר יהיה לשלוח פניה למנהל האתר דרך האתר עצמו?</p>
<p><span id="more-3526"></span>מיכל, אשתי, רצתה ללכת למשרד הפנים כדי לעדכן את המצב המשפחתי החדש שלנו בתעודת הזהות (התחתנו לפני כמה חודשים &#8211; למי שלא עקב <img src='http://www.usable.co.il/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' />  ). אנחנו גרים בגבעתיים, וחשבתי לבדוק ברשת איפה יש בסביבה סניפים של משרד הפנים.</p>
<p>התחלתי בחיפוש בגוגל &#8211; לא מצאתי כלום בחיפושים שהייתם מצפים למצוא בהם משהו (&quot;<a href="http://www.google.com/#hl=en&amp;sugexp=ldymls&amp;xhr=t&amp;q=משרד+הפנים+סניפים+גבעתיים&amp;cp=0" target="_blank">משרד הפנים סניפים גבעתיים</a>&quot; או רמת גן). התוצאות בראש תוצאות החיפוש מביאות לאתרים מקודמים שלא קשורים לעניין, והתוצאה הראשונה מ-gov.il מגלה שיש לאתר משרד הפנים מאגר של כל הסניפים עם שעות הפתיחה, אבל אין שום קישור למאגר.</p>
<p>אחרי שניסיתי כמה צירופים בגוגל, החלטתי להכנס <a href="http://www.moin.gov.il/" target="_blank">לאתר עצמו</a>. כל החיפושים שלי עלו בתוהו, עברתי על כל העמוד הראשי ולא מצאתי שום דבר שאומר &quot;סניפים&quot; או &quot;קבלת קהל&quot;.</p>
<p>המשכתי בחיפוש והגעתי לקוביה הקטנה הזו מצד שמאל:</p>
<p><img class="alignnone size-full wp-image-3528" title="id" src="http://www.usable.co.il/wp-content/uploads/2011/02/id.png" alt="" width="286" height="136" /></p>
<p>אמנם חיפשתי &quot;סניפים&quot; בסריקה שלי ולא &quot;תעודת זהות&quot; (ולכן לא ראיתי את זה במבט ראשון), אבל חשבתי שאוכל מכאן לקבל מידע. הקלקתי על המילה &quot;תעודות זהות&quot;, והגעתי <a href="http://piba.gov.il/subject/registryandpassports/pages/default.aspx">לעמוד הזה</a>, שמכיל גם מידע על תעודות זהות וגם על דרכונים ועוד דברים אחרים שקשורים למרשם אוכלוסין.</p>
<p>מכאן הגעתי לתפריט השירותים:</p>
<p><img class="alignnone size-full wp-image-3529" style="border: 1px solid black;" title="sherutim" src="http://www.usable.co.il/wp-content/uploads/2011/02/sherutim.png" alt="" width="333" height="215" /></p>
<p>בחרתי באפשרות השניה תחת &quot;חידוש תעודה&quot; והגעתי <a href="http://piba.gov.il/Subject/RegistryAndPassports/IdentityCard/Pages/SefachTzShinuyim1.aspx">לעמוד המופלא הזה</a>. שימו לב שהשירות לא מוצע באינטרנט אבל עדיין אפשר להשתמש בטופס מקוון (וכדי להשתמש צריך להוריד את <a href="http://www.usable.co.il/wp-content/uploads/2011/02/sargel.png">סרגל הכלים</a>).</p>
<p><img class="alignnone size-full wp-image-3530" style="border: 1px solid black;" title="sherut2" src="http://www.usable.co.il/wp-content/uploads/2011/02/sherut2.png" alt="" width="503" height="650" /></p>
<p>חדי העין מביניכם בוודאי שמו לב שסימנתי בחץ אדום את לשכות השירות. ראיתי את זה רק עכשיו, כשצילמתי את המסך בשביל לכתוב את הפוסט הזה.</p>
<p>גם שם הסיפור לא נגמר, כי הרשימה המתקבלת לא מכילה שעות פתיחה ושום אפשרות סינון לפי ישוב או איזור בארץ (יש הרבה לשכות שירות). שימו לב שהשם הוא &quot;לשכות שירות&quot; ולא &quot;סניפים&quot; או &quot;קבלת קהל&quot; כפי שחיפשתי.</p>
<p><img class="alignnone size-full wp-image-3532" style="border: 1px solid black;" title="snifim" src="http://www.usable.co.il/wp-content/uploads/2011/02/snifim.png" alt="" width="500" height="422" /></p>
<p>אני כבר שומע כמה שלוחשים לי מאחורי הגב &#8211; תלחץ על ה&quot;+&quot;. בסוף הרשימה יש את הסניף של רמת גן (לגבעתיים אין, מסתבר):</p>
<p><img class="alignnone size-full wp-image-3533" title="סניף רמת גן" src="http://www.usable.co.il/wp-content/uploads/2011/02/snifim2.png" alt="" width="487" height="183" /></p>
<p>כשניסיתי לפנות ל&quot;פניות הציבור&quot; באתר, קיבלתי את ההודעה הזו &#8211; נראה כמו באג:</p>
<p><a href="http://www.usable.co.il/wp-content/uploads/2011/02/snifim3.png"><img class="alignnone size-full wp-image-3536" title="פניות הציבור" src="http://www.usable.co.il/wp-content/uploads/2011/02/snifim3.png" alt="" width="602" height="495" /></a></p>
<h2>מה היה אפשר לעשות אחרת?</h2>
<ul>
<li>להשתמש במונחים שקהל היעד של האתר (כל תושבי ישראל) מכירים, ולא כאלה שמתייחסים למבנה הארגוני של משרד הפנים. &quot;רשות האוכלוסין, ההגירה ומעברי הגבול&quot; זו כותרת שמדברת אל פקידי המשרד. &quot;קבלת קהל&quot; או &quot;סניפים ושעות פתיחה&quot; היו יכולות להיות כותרות טובות יותר. אם יש כמה משרדים שמקבלים קהל, כל אחד בנושא אחר, היה אפשר לשים עוד עמוד ששואל &#8211; &quot;לשם מה אתה רוצה להגיע לקבלת קהל?&quot;  &#8211; וכן הלאה.</li>
<li>לשים את עניין השירות לקהל בסניפים במקום יותר בולט בעמוד הבית. אם אני יודע שאני צריך להגיע לסניף של משרד הפנים בתל-אביב בדחיפות כי אני צריך להנפיק דרכון חדש לנסיעה בשבוע הבא, אני לא צריך לחפור באתר כדי למצוא את זה. אין לי נתונים רשמיים, אבל אני משער שמידע על קבלת קהל וסניפים הוא אחד מ-5 הדברים החשובים ביותר באתר.</li>
<li>לקשר את העמודים הרלוונטיים למילים הרלוונטיות &#8211; הקישור &quot;תעודת זהות&quot; צריך להוביל לעמוד מידע על תעודות זהות.</li>
<li>לתת קישור לרשימת הסניפים מתוך עמוד המידע על השירות של החלפת ספח, רצוי באיזור שאומר &quot;שירות באמצעות האינטרנט: לא&quot;</li>
<li>במקום ה&quot;+&quot; התמציתי לתת קישור &quot;שעות פתיחה&quot; בהמשך השורה. פחות אלגנטי אבל יותר מובן לקהל היעד של האתר. ה&quot;+&quot; יהיה מובן בעיקר ליודעי דבר; הם כנראה לא קהל היעד העיקרי ובוודאי שלא היחיד של האתר.</li>
<li>לעשות QA (אבטחת איכות) לעמוד יצירת הקשר. אינדיקציה טובה לזה שהוא לא עובד היא שמפסיקות להגיע פניות דרך האתר. אתר בסדר גודל כזה בוודאי מקבל עשרות אם לא מאות פניות ביום דרך הטופס הזה.</li>
</ul>
<h2>רוצים שהאתר שאתם אחראים עליו יצליח?</h2>
<p>ביום שני הקרוב, ה-14/2/2011, אפתח ברמת-גן סדנה של 16 שעות (4 מפגשים של 4 שעות) ובה אלמד אתכם, בין השאר, איך להמנע מטעויות כאלה בתכנון האתר או המערכת שלכם. אגלה לכם את שיטות העבודה והתהליכים שתוכלו ליישם ביום-יום שלכם, כבר במפגש הראשון של הסדנה. אלמד אתכם איך לראות את האתר שלכם דרך עיני המשתמשים וליצור אתרים ומערכות טובים יותר, כאלה שאנשים אוהבים ומסתדרים בהם בקלות.</p>
<p>נותרו עוד מספר מקומות בסדנה, ואני מציע אותם לקוראי הבלוג במחיר מוזל של<strong> 2,250 ש&quot;ח+מע&quot;מ </strong>- רק אם תירשמו עד יום חמישי, ה-10/2.</p>
<p><a href="http://uniqui.co.il/sadna-yesodot.php">לפרטים נוספים והרשמה</a></p>
</div>]]></content:encoded>			<wfw:commentRss>http://www.usable.co.il/archives/3526/feed</wfw:commentRss>
		<slash:comments>31</slash:comments>
		</item>
		<item>
		<title>&#8235;אל תגרמו לי לחשוב, חווייה מאתר גוליבר החדש&#8236;</title>		<link>http://www.usable.co.il/archives/3462</link>
		<comments>http://www.usable.co.il/archives/3462#comments</comments>
		<pubDate>Sat, 27 Nov 2010 16:40:26 +0000</pubDate>
		<dc:creator>&#8235;barak&#8236;</dc:creator>				<category><![CDATA[בית-הספר לחוויית משתמש]]></category>
		<category><![CDATA[ממשק המשתמש UI]]></category>
		<category><![CDATA[שמישות (שימושיות)]]></category>

		<guid isPermaLink="false">http://www.usable.co.il/?p=3462</guid>
		<description><![CDATA[&#8235;גוליבר העלו לא מזמן אתר חדש, ומתוך סקרנות הצצתי עליו. קודם כל אני חייב להגיד שהשינוי דרמטי, ולטובה. האתר החדש נראה הרבה יותר טוב.
אחד היתרונות בשימוש ראשון באתר או במערכת הוא שאתה נקי מידיעה  מוקדמת וציפיה לפי גלישה בעבר (לפחות באותה המערכת). סביר להניח שרבים ממשתמשי האתר יהיו &#34;חדשים&#34; כמוני. גם בגלל שהאתר חדש, [...]&#8236;]]></description>			<content:encoded><![CDATA[<div dir="rtl"><p><a href="http://www.usable.co.il/archives/3462"><img class="alignright size-full wp-image-3464" style="margin-left: 20px;" title="plane" src="http://www.usable.co.il/wp-content/uploads/2010/11/plane.jpg" alt="" width="108" height="72" /></a>גוליבר העלו לא מזמן <a href="http://www.gulliver.co.il" target="_blank">אתר חדש</a>, ומתוך סקרנות הצצתי עליו. קודם כל אני חייב להגיד שהשינוי דרמטי, ולטובה. האתר החדש נראה הרבה יותר טוב.</p>
<p>אחד היתרונות בשימוש ראשון באתר או במערכת הוא שאתה נקי מידיעה  מוקדמת וציפיה לפי גלישה בעבר (לפחות באותה המערכת). סביר להניח שרבים ממשתמשי האתר יהיו &quot;חדשים&quot; כמוני. גם בגלל שהאתר חדש,  כמובן, אבל גם בגלל שרוב האוכלוסיה לא טסה על בסיס קבוע לחו&quot;ל משתמש שחוזר  לאתר פעם בכמה חודשים דינו כמשתמש חדש, סביר להניח שהוא לא יזכור כיצד  להשתמש באתר.</p>
<p>ניסיתי לעבוד עם האתר החדש ודי מהר נתקלתי בכמה דוגמאות שגורמות למשתמש חדש באתר לחשוב. הן הזכירו לי מיד את  הספר הנפלא, <a href="ttp://www.amazon.com/gp/product/0321344758?ie=UTF8&amp;tag=hc02-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=0321344758" target="_blank">Don't Make Me Think</a>, מיד אסביר למה.</p>
<p><span id="more-3462"></span><br />
כשנכנסתי לעמוד הבית החדש של גוליבר, מיד מצא-חן בעיני החלק העליון של העמוד. יש הרבה עמודי בית שבהם ניכר שלא היתה החלטה מה יותר חשוב, ולכן שמים את הכל בקוביות על גבי קוביות, בתקווה שהמבקר יראה את הכל. בגוליבר היתה החלטה היררכית ברורה: טיסות לחו&quot;ל הן הדבר שהכי חשוב להציג לגולש, וכל השאר צריך לבוא אחרי. זה בא לידי ביטוי גם במסגרת הכתומה וגם בעמודה שמיד מתחתיה.</p>
<p><img id="home" class="size-full wp-image-3465 alignnone" style="border: 1px solid black;" title="gulliver" src="http://www.usable.co.il/wp-content/uploads/2010/11/gulliver.jpg" alt="" width="480" height="320" /></p>
<p>לחצתי על &quot;הצג מפה&quot; וקיבלתי מפה של כל העולם. החלטתי לטוס לסן פרנסיסקו, ובתהליך זריז בחרתי את ארה&quot;ב ומשם מרשימת הערים המרכזיות הקלקתי על הלינק של סן-פרנסיסקו.</p>
<p><strong>ואז לא קרה כלום.</strong></p>
<p>חיכיתי עוד כמה שניות, ועדיין לא קרה כלום.</p>
<p>הסתכלתי על המסך, וניסיתי לחשוב איפה הייתי. כאן חשבתי על Don't Make Me Think בפעם הראשונה. נזכרתי שהתחלתי את התהליך בתיבה הכתומה, וראיתי שכתוב בה כבר סן פרנסיסקו, 2 מבוגרים&#8230; מצויין. לחצתי על &quot;חפש&quot;.</p>
<p><a href="http://www.usable.co.il/wp-content/uploads/2010/11/gulliver-יציאה.png"><img class="size-full wp-image-3466 alignnone" title="gulliver-יציאה" src="http://www.usable.co.il/wp-content/uploads/2010/11/gulliver-יציאה.png" alt="" width="359" height="127" /></a></p>
<p>נתעלם רגע מהודעת ה-JavaScript המיושנת (זה כל-כך 90s), בעיני אין לה מקום באתר חדש.</p>
<p>לחצתי OK והסתכלתי שוב על הטופס:</p>
<p><img class="size-full wp-image-3467 alignnone" title="Gulliver-DontMakeMeThink_search" src="http://www.usable.co.il/wp-content/uploads/2010/11/Gulliver-DontMakeMeThink_search.png" alt="" width="281" height="194" /></p>
<p>שום דבר לא סימן לי מה השדה חסר.</p>
<p>אתם יכולים לקרוא לי קטנוני, אבל היה הרבה יותר ברור מה לעשות אם היו מסמנים את השדה שחסר, למשל כך:</p>
<p><a href="http://www.usable.co.il/wp-content/uploads/2010/11/Gulliver-DontMakeMeThink_search-copy.png"><img class="alignnone size-full wp-image-3468" title="Gulliver-DontMakeMeThink_search copy" src="http://www.usable.co.il/wp-content/uploads/2010/11/Gulliver-DontMakeMeThink_search-copy.png" alt="" width="281" height="194" /></a></p>
<p>יכול להיות שעבור 80% מהמשתמשים זה ברור מה לעשות, אבל לא כדאי בשביל אלה שזה לא ברור להם לסמן את הדרך?</p>
<p>מילאתי תאריך והגעתי לדף התוצאות (הקליקו כדי להגדיל בחלון חדש)</p>
<p><a href="http://www.usable.co.il/wp-content/uploads/2010/11/Gulliver-DontMakeMeThink_bigger.png" target="_blank"><img class="alignnone size-full wp-image-3469" style="border: 1px solid black;" title="Gulliver-DontMakeMeThink_bigger" src="http://www.usable.co.il/wp-content/uploads/2010/11/Gulliver-DontMakeMeThink_bigger.png" alt="" width="387" height="568" /></a></p>
<p>מה שקרה לי כאן היה שלא ראיתי בכלל את החלק העליון של הדף, כי הרשימה משכה את תשומת הלב שלי.</p>
<p>הזכרתי כאן בעבר את <a href="http://www.usable.co.il/archives/1102">עקרונות הגשטאלט</a>. אחד מהם (המשכיות) טוען שהעין שלנו מחפשת רצפים. הקוביות עם המחירים יוצרות רצף מאוד חזק, וזו כנראה הסיבה שבגללה בכלל לא ראיתי את החלק העליון של הדף.</p>
<p>ברשימה הארוכה יש לגולש הרבה מקום לבלבול. יש המון פרטים, ואומנם המידע החשוב צמוד למחיר שאותו כנראה הרוב יסרקו לפני הכל, אבל להערכתי החלק העליון נועד בדיוק כדי למנוע את הסריקה הלוך ושוב של התוצאות.</p>
<p>כך נראה החלק העליון:</p>
<p><img class="alignnone size-full wp-image-3470" style="border: 1px solid black;" title="Gulliver-DontMakeMeThink3" src="http://www.usable.co.il/wp-content/uploads/2010/11/Gulliver-DontMakeMeThink3.png" alt="" width="580" height="265" /></p>
<p>האיזור העליון של הדף מסכם את כל תוצאות החיפוש, והרעיון לכלול אותו מעל תוצאות החיפוש מצוין. הוא חוסך את המעבר על כל הרשימה, מקטין את המאמץ של הגולש. בעיני זה החלק הכי חשוב בדף.</p>
<p>אם הזכרתי היררכיה ויזואלית טובה בעמוד הבית, כאן דווקא היתה הצלחה פחות גדולה עם היררכיה.</p>
<p><strong>ראשית</strong>, החליטו להציג לי שתי טיסות: אחת הזולה ביותר (אבל עם רשימת המתנה), והשניה יקרה יותר, אבל עם מקומות באישור מיידי. מאחר וההזמנה היא למחר (בעת החיפוש התאריך היה ה-26.11), סביר להניח שרשימת ההמתנה בכלל לא רלוונטית אלי.</p>
<p><strong>שנית</strong>, גם אם רשימת ההמתנה רלוונטית לי, היא בוודאי פחות חשובה מאשר הטיסה שאפשר להזמין בה מקום כבר עכשיו (בוודאי בשביל גוליבר שעשויים להפסיד את הלקוח בגלל המילים &quot;רשימת המתנה&quot;), אבל למרות זאת הן נראות זהות מבחינה ההיררכיה העיצובית, אף אחת מהן לא מושכת יותר את העין מהשניה.</p>
<p><strong>שלישית</strong>, הכותרת של שתיהן היא &quot;הטיסה הזולה ביותר&quot;, מה שמקשה עוד יותר על ההשוואה ביניהן ומוסיף זמן מחשבה.</p>
<p><strong>רביעית, </strong>אין בחלק הזה שום Call for Action חזק שמושך אותי לבחור את האפשרות הזולה ביותר שזמינה לי כעת.</p>
<h2>הצעה לשינוי</h2>
<p>הנה רעיון איך לעשות את זה בצורה שתמשוך יותר את העין ותמנע מהמשתמש את הצורך לפענח את רשימת התוצאות הארוכה:</p>
<p><img class="alignnone size-full wp-image-3472" style="border: 1px solid black;" title="gulliver-suggest" src="http://www.usable.co.il/wp-content/uploads/2010/11/gulliver-suggest.png" alt="" width="597" height="203" /></p>
<p>עשיתי פה כמה שינויים:</p>
<ul>
<li>החלפתי בין הטיסה של רשימת ההמתנה לטיסה שאפשר להזמין.</li>
<li>החלפתי בין השורה השניה והראשונה, וכעת הכותרת מעידה על ההבדל בין הטיסות.</li>
<li>הדגשתי את הטיסה עם המקומות הפנויים, והחלשתי את הטיסה של רשימת ההמתנה.</li>
<li>הוספתי V ירוק מימין לטיסה שאפשר להזמין, וכפתור כחול ובולט מתחתיה.</li>
</ul>
<p>אני מעריך ששינוי כזה, שמוביל את המשתמש לטיסה אחת ספציפית, היה חוסך הרבה זמן גלישה ובסופו של דבר גם משפר את התוצאות הכספיות של העמוד הזה. <strong>פחות משתמשים מבולבלים = יותר כסף. </strong>כמובן שצריך לבדוק את זה כדי לוודא שזה אכן משיג את המטרות הללו.</p>
<p>אני משער שעם מעצב גראפי מוצלח יותר ממני זה גם בוודאי היה נראה יותר טוב <img src='http://www.usable.co.il/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<h2>לאחר הלחיצה</h2>
<p>אגב, לאחר שלוחצים על הקישור בחלק העליון של העמוד, הדבר היחיד שקורה הוא שהעמוד קופץ למטה כך שהטיסה הרלוונטית נמצאת בראש העמוד. למשתמש המנוסה מאוד זה עשוי להיות ברור, אבל לרוב המשתמשים אני משער שזה יהיה מאוד מוזר. הדף קופץ למטה, אבל שום טיסה לא מסומנת, ועכשיו שוב המשתמש נאלץ לסרוק את הרשימה.</p>
<p>אני משאיר לדמיון שלכם מה אפשר לעשות במקום זה&#8230;</p>
<h2>איך להימנע מבעיות כאלה?</h2>
<p>אחד הדברים שאני מלמד <a href="http://uniqui.co.il/sadna-yesodot.php" target="_blank">בסדנאות שלי</a> הוא איך לעשות בדיקות עם משתמשים. בדיקות כאלה עוזרות לגלות בדיוק מה מצליח למשתמשים ומה לא, מה לוקח להם הרבה זמן ולמה. זה די מרשים לגלות שאפילו 10 דקות של בדיקה יכולות לעשות הבדל משמעותי.</p>
<p>אם תצטרפו לסדנה תוכלו לעשות בדיקות כאלה בעצמכם, במערכות שלכם. בנוסף, תלמדו כללים אוניברסליים לשמישות (usability) וכיצד לבנות מערכת מנקודת המבט של המשתמש.</p>
<p><strong>הסדנאות הקרובות </strong>נפתחות בשבוע הבא, בשלושה מועדים:</p>
<ul>
<li>5/12, יום ראשון (ועוד 3 ימי ראשון שאחריו) &#8211; למנהלי מוצר, מנהלי פרויקטים, מנהלי פיתוח ויזמים, <strong>בתל-אביב.</strong></li>
<li>6/12, יום שני (ועוד 3 ימי שני שאחריו) &#8211; למעצבים גראפיים, <strong>בתל-אביב.</strong></li>
<li>7/12, יום שלישי (ועוד 3 ימי שלישי שאחריו) &#8211; למעצבים גראפיים, <strong>בחיפה.</strong></li>
</ul>
<p>הסדנה נמשכת ארבעה מפגשים של 4 שעות, בין 9:00-13:00.</p>
<p>מחיר הסדנה המלא הוא <span style="text-decoration: line-through;">2,600 ש&quot;ח+מע&quot;מ</span>,</p>
<p>מחיר הסדנה למי שירשם עד יום שלישי הקרוב, ה-30/11: <strong>2,200 ש&quot;ח+מע&quot;מ</strong> <strong>(15% הנחה!)</strong></p>
<p>מי שמתקשה להגיע למפגש הראשון של הסדנה בגלל חנוכה יוכל להשלים אותו במפגש הראשון של המחזור הבא שיתקיים בחודש פברואר. החומר במפגש הראשון חשוב, אבל הוא לא הכרחי כדי להפיק את  המקסימום משאר 3 המפגשים.</p>
<p><a href="http://uniqui.co.il/sadna-yesodot.php"><img class="alignnone size-full wp-image-3495" title="לפרטים נוספים על הסדנה והרשמה" src="http://www.usable.co.il/wp-content/uploads/2010/11/more.png" alt="" width="101" height="26" /></a></p>
<p><strong><a href="http://uniqui.co.il/sadna-yesodot.php">לפרטים נוספים והרשמה לסדנה</a></strong></p>
<h2>משתתפי הסדנה מספרים</h2>
<blockquote>
<p style="text-align: right;">&quot;עד כה התנהלתי    בעולם האיפיון וחווית המשתמש באופן אינטואיטיבי  לחלוטין, וזו בעצם היתה    הפעם הראשונה בה ניגשתי לנושא באופן מסודר  ומלומד. החוויה עצמה היתה מאוד    חדשנית עבורי,והרגשתי שאני מקבלת המון  מידע חשוב. בעיקר הרגשתי שהתפתחה    אצלי החשיבה הביקורתית לגבי פרוייקטים  שאנחנו עושים ועשינו והכלים לנמק מה    שעד עכשיו הרגשתי באינטואציה שנכון  או לא &#8211; עכשיו אני גם מבינה ויודעת    להסביר למה.. <img src='http://www.usable.co.il/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> &quot;<strong> </strong></p>
<p style="text-align: left;"><strong>שירית שרגא</strong>, מנהלת פרויקטים, ווייט לייבל</p>
</blockquote>
<p style="text-align: left;"><strong><br />
</strong></p>
<blockquote>
<p style="text-align: right;">&quot;סדנת &quot;עיצוב חווית המשתמש&quot; של ברק דנין היא כלי מצויין למי שמתחיל את  דרכו בעולם חווית המשתמש.          בפרט הייתי ממליץ עליה למנהלי מוצר אשר  אחראים על ממשק משתמש ואינם מגיעים מהתחום. ברק מציג את החומר בצורה מובנית היטב, מעניינת וברורה, ומלווה בתרגילים מעשיים הממחישים אותו.          הדוגמאות מאוד רלוונטיות, ומציגות שימוש יום יומי ומעשי של העקרונות והחומר הנלמד.          היחס המקצועי, האדיב והסבלני של ברק הופכים את הסדנא לתענוג אמיתי.&quot;<strong> </strong></p>
<p style="text-align: left;"><strong>דן ברק</strong>, מנהל מוצר, קלירזן</p>
</blockquote>
<p><a href="http://uniqui.co.il/sadna-yesodot.php"><img title="לפרטים נוספים על הסדנה והרשמה" src="../wp-content/uploads/2010/11/more.png" alt="" width="101" height="26" /></a></p>
<p><strong><a href="http://uniqui.co.il/sadna-yesodot.php">לפרטים נוספים והרשמה לסדנה</a></strong></p>
<div style="clear:both"></div>
</div>]]></content:encoded>			<wfw:commentRss>http://www.usable.co.il/archives/3462/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>&#8235;שיפור טופס להזנת פרטי צ&#039;ק: מה דעתכם?&#8236;</title>		<link>http://www.usable.co.il/archives/3426</link>
		<comments>http://www.usable.co.il/archives/3426#comments</comments>
		<pubDate>Wed, 10 Nov 2010 09:08:52 +0000</pubDate>
		<dc:creator>&#8235;barak&#8236;</dc:creator>				<category><![CDATA[בית-הספר לחוויית משתמש]]></category>
		<category><![CDATA[ממשק המשתמש UI]]></category>
		<category><![CDATA[שמישות (שימושיות)]]></category>

		<guid isPermaLink="false">http://www.usable.co.il/?p=3426</guid>
		<description><![CDATA[&#8235;במערכת החשבוניות שאני משתמש בה בעסק שלי, flex (ממליץ בחום!), נתקלתי בטופס שהפריע לי במיוחד. לא בגלל שהוא לא מעוצב יפה, או בגלל שהטקסטים בו לא בסדר. הוא פשוט הולך, לדעתי, נגד אחד מעקרונות השמישות החשובים יותר.
רציתי לחלוק אתכם את ההצעה שלי לשינוי, להסביר למה אני מציע אותה ולשמוע מה דעתכם.

הטופס: הזנת צ'ק
הטופס המדובר משמש [...]&#8236;]]></description>			<content:encoded><![CDATA[<div dir="rtl"><p>במערכת החשבוניות שאני משתמש בה בעסק שלי, <a href="http://www.flex.co.il/תוכנת-הנהלת-חשבונות.aspx?AffiliateBusinessId=1229">flex</a> (ממליץ בחום!), נתקלתי בטופס שהפריע לי במיוחד. לא בגלל שהוא לא מעוצב יפה, או בגלל שהטקסטים בו לא בסדר. הוא פשוט הולך, לדעתי, נגד אחד מעקרונות השמישות החשובים יותר.</p>
<p>רציתי לחלוק אתכם את ההצעה שלי לשינוי, להסביר למה אני מציע אותה ולשמוע מה דעתכם.<br />
<span id="more-3426"></span></p>
<h2>הטופס: הזנת צ'ק</h2>
<p>הטופס המדובר משמש להזנת צ'קים למערכת החשבוניות כדי להוציא קבלה. הטופס נראה כך:</p>
<p><a href="http://www.usable.co.il/wp-content/uploads/2010/11/flex-check_order.png"><img class="alignnone size-full wp-image-3427" title="הטופס המקורי" src="http://www.usable.co.il/wp-content/uploads/2010/11/flex-check_order.png" alt="" width="570" height="400" /></a></p>
<p>הוא משמש אך ורק להזנת מידע, כלומר לא משתמשים בו לצפיה בפרטי צ'ק (הוא מוצג במקום אחר).</p>
<p>להזכירכם, צ'ק נראה כך:</p>
<p><a href="http://www.usable.co.il/wp-content/uploads/2010/11/check-copy1.jpg"><img class="alignnone size-full wp-image-3429" title="צ'ק לדוגמא" src="http://www.usable.co.il/wp-content/uploads/2010/11/check-copy1.jpg" alt="" width="550" height="249" /></a></p>
<h2>הבעיה</h2>
<p>אני משתמש במערכת הזו כבר שנה בערך. בכל פעם שאני מזין צ'ק אני מוצא את עצמי שוב ושוב מתעכב עם הזנת הפרטים למערכת. אם נתבונן לרגע על משימת ההקלדה, הסיבה תעלה מיד.</p>
<p>כשאנחנו מעבירים תוכן ממבנה נתונים אחד בעולם האמיתי (צ'ק) למבנה נתונים אחר בעולם הדיגיטלי (טופס), אחד מעקרונות השמישות החשובים שכדאי לזכור הוא &#8211; <a href="http://www.useit.com/papers/heuristic/heuristic_list.html">התאמה בין המערכת לעולם האמיתי</a> (העקרון השני שנילסן מציג). העקרון הזה מדבר, בין השאר, על שימוש בסדר לוגי וטבעי (עבור המשתמש).</p>
<p>גם נורמן דיבר על האספקט הזה של העקרון של נילסן <a href="http://www.amazon.com/gp/product/0465067107?ie=UTF8&amp;tag=hc02-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=0465067107">בספר שלו</a>. הוא קרא לזה &quot;מיפויים טבעיים&quot; (natural mapping). הוא מדבר בספר על מפסקי תאורה שמסודרים על הקיר בצורה שלא תואמת את הסדר של התאורה שהם שולטים עליה. המפסק הימני שולט על הנורה השמאלית ולהיפך &#8211; מאוד מבלבל, גם למי שמתשמש במפסקים כל יום. אנחנו מצפים באופן די טבעי שהמפסק הימני יפעיל את האור הימני.</p>
<p>בואו נתבונן על סדר השדות בטופס, לפי סדר המילוי (ימין לשמאל, למעלה למטה):</p>
<ul>
<li>סכום במספר</li>
<li>תאריך</li>
<li><strong>מס' שיק</strong></li>
<li><strong>שם בנק<br />
</strong></li>
<li><strong>סניף</strong></li>
<li><strong>מס' חשבון</strong></li>
</ul>
<p>אם נסתכל על המסלול שהעין צריכה לעשות על הצ'ק כדי למלא את הטופס, נקבל את התמונה הבאה:</p>
<p><img class="alignnone size-full wp-image-3430" title="מסלול סריקת הצ'ק לפי הטופס הנוכחי" src="http://www.usable.co.il/wp-content/uploads/2010/11/check-form-order.png" alt="" width="550" height="249" /></p>
<p>המסלול שנדרש מהעין כדי לקרוא את הצ'ק כדי להזין את הטופס הוא די כאוטי ובזבזני &#8211; מבחינת הזמן שנדרש מהמשתמש לבצע אותו. מסלול פשוט וישיר יהיה הרבה יותר קל להזנה.</p>
<p>תארו לעצמכם שבהזנת פרטי אשראי, למשל, היו דורשים מכם להזין את ארבע הספרות הראשונות, אחר-כך את ארבע הספרות האחרונות ואז את אלה שבאמצע. זה היה מוזר, לא? זה בדיוק מה שקורה כאן. הרצף של 3 השדות הצמודים בצ'ק, מס' חשבון, סניף ומס' שיק, נשבר על פני שתי שורות (מיפוי לא טבעי!) וגם מופיע משמאל לימין במקום מימין לשמאל.</p>
<h2>הצעה לשינוי</h2>
<p>אם היינו רוצים ליצור רצף שיותר קל לסרוק, היינו יכולים לסדר את השדות בטופס ככה:</p>
<ul>
<li>סכום במספר</li>
<li>תאריך</li>
<li><strong>מס' חשבון</strong></li>
<li><strong>סניף<br />
</strong></li>
<li><strong>מס' שיק</strong></li>
<li><strong>שם בנק</strong></li>
</ul>
<p>מסלול סריקת הצ'ק היה נראה אז ככה:</p>
<p><img class="alignnone size-full wp-image-3431" title="מסלול סריקת הצ'ק לפי ההצעה" src="http://www.usable.co.il/wp-content/uploads/2010/11/check-suggestion.png" alt="" width="550" height="249" /></p>
<p>אם נניח שאנחנו צריכים להשתמש בעיצוב הנוכחי ורק לשנות את הסדר של השדות, אני חושב שאנחנו יכולים להתפשר על המיקום של שם הבנק בסדר השדות. כך נוכל לקבל ברצף אחד את מספר החשבון, מספר הסניף ומספר השיק (כפי שהם בצ'ק):</p>
<p><img class="alignnone size-full wp-image-3433" title="ארגון מחדש של הטופס" src="http://www.usable.co.il/wp-content/uploads/2010/11/flex-check_order_fixed.jpg" alt="" width="570" height="400" /></p>
<p>חדי העין שביניכם בוודאי שמו לב שגם שיניתי את היישור של התוויות &#8211; הן צמודות לשמאל עכשיו במקום לימין. בפוסט שלי על <a href="http://www.usable.co.il/archives/530">עיצוב טפסים</a> סיפרתי לכם שיישור שמאלי יכול לצמצם את זמן ההקלדה בכ-50% (!!!), וזו בדיוק הסיבה ששיניתי את היישור.</p>
<p>השינוי בסך הכל די פשוט, אבל הזמן שהוא חוסך למשתמשים, להערכתי, הוא רב. המשתמש נדרש לרצף הגיוני יותר של שדות, ולכן הזמן שהוא נדרש לבזבז על קפיצה בין הטופס על המסך לצ'ק שעל השולחן ובחזרה (כדי למצוא את השדה הבא) הוא קטן יותר. אני מעריך שאחרי כמה פעמים שמשתמש יעבוד עם המבנה החדש של הטופס, הוא יפסיק להסתכל על שמות השדות במסך, כי הם יהיו תואמים לשמות השדות בטופס.</p>
<p>אפשר היה כמובן לשפר עוד, להוסיף צילום של צ'ק ולסמן עליו, בכל שדה שעוברים, את האיזור בצ'ק שצריך להסתכל עליו. זה יכול היה להיות קצת בעייתי בגלל העיצוב השונה של כל צ'ק (אפילו בתוך אותו בנק!) אבל לפחות לשלושת המספרים שבתחתית הצ'ק, שחוזרים על עצמם במדויק בכל הצ'קים בארץ, היה אפשר להשתמש בצילום צ'ק.</p>
<h2>תגובת בעל האתר</h2>
<p>שלומי, מי שעומד מאחורי האתר, נותן שירות מצוין ואני מאוד נהנה לעבוד מולו. במקרה הזה לא הגענו להסכמה, ורציתי להציג כאן את תגובתו להצעה שלי:</p>
<blockquote><p><span style="color: #000080;">היי ברק,</span></p>
<p><span style="color: #000080;"> הקדשתי לנושא מחשבה עמוקה והגעתי למסקנה שאין זה נכון לשנות את סדר השדות.</span></p>
<p><span style="color: #000080;">1.       <strong>לוגית:</strong> השדות החשובים ביותר הם סכום, תאריך ומספר שיק. אני רוצה שהם יהיו למעלה.<br />
היתר פרטים הכרחיים אך לא מהות השיק.</span></p>
<p><span style="color: #000080;">2.      <strong>זרימה: </strong>זרימת העין היא נגד כיוון השעון סכום &gt;&gt; תאריך &gt;&gt; מס' שיק &gt;&gt; מספר בנק &gt;&gt; סניף &gt;&gt; חשבון.</span></p>
<p><span style="color: #000080;"> </span></p>
<p><span style="color: #000080;">הקונפליקטים שלך נובעים מ:</span></p>
<p><span style="color: #000080;">1.       היפוכי rtl/ltr (כל החלק התחתון של שיק הוא ltr לעומת חלק תחתון של טופס ההזנה שהוא rtl);</span></p>
<p><span style="color: #000080;">2.       מהתייחסות ללוגו כשם הבנק במקום למספר הבנק בחלק התחתון של השיק (במקרה שלך: 10 הוא מספר הבנק).</span></p>
<p><span style="color: #000080;">תודה שוב על ההתייחסות, וערב טוב.</span></p></blockquote>
<p>לגבי 1, אני חושב שברגע שהסדר של השדות על המסך הפוך מהסדר על הצ'ק (או בכלל לא דומה לא), המשתמשים מתבלבלים ומבזבזים זמן על מציאת הסדר הנכון.</p>
<p>לגבי 2, אני מעולם לא שמתי לב שמספר הבנק מופיע בתחתית הצ'ק. ברוב הצ'קים שאני מקבל, בניגוד לזה שכאן למעלה, אין תווית כזאת מתחת למספר הבנק (ברוב הצ'קים שאני מקבל רשום רק &quot;מספר סניף&quot;, למרות שמספר הבנק מופיע).הנה דוגמאות מבנק אוצר החייל, צ'ק אחר מלאומי, וצ'ק מדיסקונט:</p>
<p><a href="http://www.usable.co.il/wp-content/uploads/2010/11/check-samples.jpg"><img class="alignnone size-full wp-image-3434" title="check-samples" src="http://www.usable.co.il/wp-content/uploads/2010/11/check-samples.jpg" alt="" width="600" height="227" /></a></p>
<p>להערכתי בדיקה קצרצרה (20 דקות) עם 4-5 משתמשים אמיתיים וכמה צ'קים אמיתיים היתה חושפת את הבעיות האלה תוך זמן קצר.</p>
<h2>מה דעתכם?</h2>
<p>מהידע והנסיון שלכם, או סתם מההערכה שלכם מהתבוננות בטופס ובצ'קים, האם נכון לשנות את הטופס, או שעדיף להשאיר אותו כפי שהוא?</p>
<p>אשמח לשמוע מה דעתכם.</p>
</div>]]></content:encoded>			<wfw:commentRss>http://www.usable.co.il/archives/3426/feed</wfw:commentRss>
		<slash:comments>24</slash:comments>
		</item>
		<item>
		<title>&#8235;אורנג&#039;: שירות ברמה שלא היכרתם?&#8236;</title>		<link>http://www.usable.co.il/archives/3280</link>
		<comments>http://www.usable.co.il/archives/3280#comments</comments>
		<pubDate>Wed, 16 Jun 2010 11:35:11 +0000</pubDate>
		<dc:creator>&#8235;barak&#8236;</dc:creator>				<category><![CDATA[ביקורות אתרים]]></category>
		<category><![CDATA[בית-הספר לחוויית משתמש]]></category>
		<category><![CDATA[שמישות (שימושיות)]]></category>

		<guid isPermaLink="false">http://www.usable.co.il/?p=3280</guid>
		<description><![CDATA[&#8235;אחרי מעל 8 שנים שאני לקוח באורנג', הייתם מצפים שהם יגלו שברק דנין זה אדון, לא? מצורף למטה אימייל שקיבלתי מאורנג' היום.
להתאמה אישית לנמען יש ערך רב, בוודאי כשפונים ללקוח. ברור לנו שמחשב שלח את זה, אבל בשביל לדבר אל הג'נדר הנכון לא צריך לעבוד קשה, לא כמו למבחן  טיורינג אמיתי.
כשזה ככה זה מרגיש [...]&#8236;]]></description>			<content:encoded><![CDATA[<div dir="rtl"><p>אחרי מעל 8 שנים שאני לקוח באורנג', הייתם מצפים שהם יגלו ש<strong>ברק דנין זה אדון</strong>, לא? מצורף למטה אימייל שקיבלתי מאורנג' היום.</p>
<p>להתאמה אישית לנמען יש ערך רב, בוודאי כשפונים ללקוח. ברור לנו שמחשב שלח את זה, אבל בשביל לדבר אל הג'נדר הנכון לא צריך לעבוד קשה, לא כמו ל<a href="http://he.wikipedia.org/wiki/%D7%9E%D7%91%D7%97%D7%9F_%D7%98%D7%99%D7%95%D7%A8%D7%99%D7%A0%D7%92">מבחן  טיורינג</a> אמיתי.</p>
<p>כשזה ככה זה מרגיש כמו המכתבים המודפסים האלה שהיו שולחים אלינו פעם, ועדיין שולחים היום לפעמים. אתם יודעים, אלה עם ה&quot;שומר מקום&quot; בדמות קו תחתון שהשם שלכם כתוב עליו בעט ואחריו מודפס &quot;היקר/ה&quot;. באינטרנט אפשר בעזרת שינוי קטן &#8211; &quot;אדון דנין&quot; במקום &quot;אדון \ גברת דנין&quot; לתת הרגשה הרבה יותר אנושית, כזו שדומה לשיחה בין אדם לאדם, לא בין אדם למחשב. אגב, אפשר גם <a href="http://www.xmpie.com/vdp">לעשות את זה בדפוס</a>.</p>
<p><img class="alignnone size-full wp-image-3281" title="אורנג': שירות ברמה שלא היכרתם" src="http://www.usable.co.il/wp-content/uploads/2010/06/2010-06-16_1428.png" alt="" width="586" height="512" /></p>
</div>]]></content:encoded>			<wfw:commentRss>http://www.usable.co.il/archives/3280/feed</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>&#8235;אתם בטוחים שאתם רוצים להמשיך?&#8236;</title>		<link>http://www.usable.co.il/archives/3182</link>
		<comments>http://www.usable.co.il/archives/3182#comments</comments>
		<pubDate>Sat, 08 May 2010 12:41:17 +0000</pubDate>
		<dc:creator>&#8235;barak&#8236;</dc:creator>				<category><![CDATA[בית-הספר לחוויית משתמש]]></category>
		<category><![CDATA[פסיכולוגיה קוגניטיבית]]></category>
		<category><![CDATA[שמישות (שימושיות)]]></category>

		<guid isPermaLink="false">http://www.usable.co.il/?p=3182</guid>
		<description><![CDATA[&#8235;כמה פעמים  ישבתם מול הודעה שאומרת לכם &#8211; &#34;[משהו] עומד לקרות. האם להמשיך?&#34;, עם  כפתורי &#34;המשך&#34; ו&#34;בטל&#34;? כמה פעמים מתוכן קראתם את ההודעה שוב ושוב והתלבטתם  על מה ללחוץ, וכמה פעמים פשוט לחצתם על &#34;בטל&#34; או &#34;המשך&#34; בלי לחשוב?
על  הודעות אישור פעולה (confirmation messages), מתי להשתמש בהן ומתי ממש לא.

דוגמה
כולנו  [...]&#8236;]]></description>			<content:encoded><![CDATA[<div dir="rtl"><p dir="rtl"><a href="http://www.usable.co.il/archives/3182"><img class="alignright size-full wp-image-3188" style="margin-left: 20px;" title="stop" src="http://www.usable.co.il/wp-content/uploads/2010/05/stop.jpg" alt="" width="108" height="76" /></a>כמה פעמים  ישבתם מול הודעה שאומרת לכם &#8211; &quot;[משהו] עומד לקרות. האם להמשיך?&quot;, עם  כפתורי &quot;המשך&quot; ו&quot;בטל&quot;? כמה פעמים מתוכן קראתם את ההודעה שוב ושוב והתלבטתם  על מה ללחוץ, וכמה פעמים פשוט לחצתם על &quot;בטל&quot; או &quot;המשך&quot; בלי לחשוב?</p>
<p style="clear: both;" dir="rtl">על  הודעות אישור פעולה (confirmation messages), מתי להשתמש בהן ומתי ממש לא.</p>
<p><span id="more-3182"></span></p>
<h2 dir="rtl">דוגמה</h2>
<p dir="rtl">כולנו  נתקלנו בהודעות כמו זו מג'ימייל:</p>
<p dir="rtl"><img src="http://uniqui.co.il/emails/images/gmail2.png" alt="" /></p>
<p dir="rtl">המטרה שלה  ברורה: היא מוודאה שהתכוונתם לשלוח את ההודעה בלי נושא. הודעות  אישור פעולה כאלה (confirmation messages) נועדו כדי למנוע סוג של טעויות  שנקראות &quot;מעידות פעולה&quot; (<a href="http://www.memory-key.com/everydaymemory/slips.htm">action  slips</a>), פעולות שהמשתמש יזם אבל לא התכוון לבצע. הן עשויות להיות תוצאה  של חוסר תשומת לב או חוסר הבנה של הפעולה עצמה, ויש להודעות האלה תפקיד  חשוב. אבל האם נכון להשתמש בהן בכל פעולה שהמשתמש עשוי לטעות בה?</p>
<h2 dir="rtl">עדיף לא להסתכן בטעות</h2>
<p><a href="http://www.usable.co.il/wp-content/uploads/2010/05/jam.jpg"><img class="size-full wp-image-3184 alignleft" style="margin-right: 20px;" title="ככה נראים מנופים שנתקעו" src="http://www.usable.co.il/wp-content/uploads/2010/05/jam.jpg" alt="ככה נראים מנופים שנתקעו" width="200" height="373" /></a></p>
<p>מאיר אריאל שר <a href="http://www.youtube.com/watch?v=uoXF3KE7jag" target="_blank">&quot;טעות במחשב עלתה לי מיליון&#8230;&quot;</a> &#8211; <a href="http://uxtasy.wordpress.com/2010/05/08/error-cost" target="_blank">ויטלי כתב</a> על מקרה מהשבוע האחרון שבו זה באמת קרה: סוחר בבורסה לחץ בטעות על הכפתור הלא נכון, והזרים הוראה לרכישה של מיליארדי (ביליונֵי) מניות, במקום מיליונים. הבורסה הגיבה בנפילה. האם המשתמש טעה ולחץ על &quot;b&quot; (עבור billion) במקום על &quot;m&quot; (עבור million)? כנראה שלא נדע. אבל בכל מקרה שבו מציבים מכשול, מקום שבו משתמשים עשויים לטעות, יהיו כאלה שיטעו בו. אפשר לשאול את המשתמש &quot;האם אתה בטוח?&quot;, אבל יותר כדאי לעצב את המערכת כך שלא יהיה סיכוי לטעות.</p>
<p>דוגמה מצויינת לשיקול כזה בעיצוב היא מכונת הכתיבה וסידור המקלדת שלה (Qwerty), אותו סידור מקלדת שאתם משתמשים בו עכשיו. הסידור  של המקשים במקלדת תוכנן כך שאותיות שמופיעות אחת ליד השניה בתדירות גבוהה יהיו  רחוקות אחת מהשניה בלוח המקשים. הסיבה היתה שבמכונות כתיבה היו מנופים  שהתרוממו כשלחצו על מקש, ולחיצה על שני מקשים סמוכים היתה גורמת למנופים  (לפעמים) להתקל אחד בשני ולהתקע. במקום לחנך את המשתמשים במכונת הכתיבה לא  ללחוץ במהירות על שני מקשים סמוכים אחד אחרי השני, פשוט מיקמו אותם רחוק אחד  מהשני. אפשר לקרוא על זה עוד <a href="http://en.wikipedia.org/wiki/QWERTY" target="_blank">בוויקיפדיה</a> &#8211; סיפור מעניין. משם גם לקוחה התמונה הזו.</p>
<p>את אותו הדבר רצוי וכדאי לעשות בממשק. למשל, במערכת שמתכננים איתה את לוח הפגישות של רופא, לא למקם את כפתור ה&quot;יציאה&quot; ליד כפתור ה&quot;פגישה חדשה&quot; או ליד כפתור ה&quot;שמירה&quot;. ברור שאנשים יודעים לקרוא, אבל הם עשויים לפספס, והרחקת הכפתורים תעזור להם לא לטעות.</p>
<p>כשאי אפשר להשתמש בפתרונות כאלה, ובמקומות שבהם באמת נחוצה פעולה מסוכנת, אפשר להשתמש בהודעות אישור פעולה, אבל חשוב להפעיל שיקול דעת. אני אסביר למה.</p>
<h2 dir="rtl"><strong>סכנה 1:  הטרדה</strong></h2>
<p dir="rtl">הסכנה  העיקרית בשימוש בהודעות אישור פעולה הוא הטרדה. לשאול את המשתמש על כל פעולה &quot;האם  אתה בטוח?&quot; זו הטרדה אמיתית. יש מערכות ששואלות &quot;האם אתה בטוח שאתה רוצה  לצאת מהמערכת?&quot; בכל פעם שיוצאים (Log Out). האם זה באמת נחוץ? התשובה היא,  כמובן, לא.</p>
<p dir="rtl">כדי להמנע מהטרדה כזו צריך להפעיל שיקול דעת פשוט ולשאול כמה  שאלות פשוטות:</p>
<ul dir="rtl">
<li>האם הפעולה הזו בלתי-הפיכה?</li>
<li>אם היא הפיכה, האם המשתמש ידע בקלות כיצד לבטל אותה?</li>
<li>אם היא בלתי-הפיכה, האם ביצוע שלה יגרום לאובדן מידע או זמן משמעותיים  למשתמש?</li>
</ul>
<p dir="rtl">רק אם  הפעולה בלתי-הפיכה והיא תגזול מידע או זמן מהמשתמש, או אם היא הפיכה אבל  למשתמש אין את הידע כיצד להפוך אותה, רק אז חשוב להציג הודעת אישור.</p>
<h2 dir="rtl"><strong>סכנה 2:  ניסוח </strong></h2>
<p dir="rtl">כמו בכל  מקום אחר בממשק, כשכותבים הרבה המשתמשים לא קוראים. לכן חשוב לכתוב טקסט  קצר בהודעה מהסוג הזה, אם רוצים שהמשתמשים יקראו אותה. אבל טקסט קצר לא  מספיק, הוא צריך להיות גם ברור. שימו לב להודעה הזו מ-Powerpoint 2007,  שמופיעה לפעמים כשסוגרים את התוכנה:</p>
<p dir="rtl"><img src="http://uniqui.co.il/emails/images/powerpnt_confirm.png" alt="" /></p>
<p dir="rtl">לא הבנתם?  הנה, <a href="http://www.youtube.com/watch?v=KBARrfcI_P8">אריק איינשטיין  יסביר לכם</a>:</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="385" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/KBARrfcI_P8&amp;hl=en_US&amp;fs=1&amp;rel=0&amp;color1=0x3a3a3a&amp;color2=0x999999" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="480" height="385" src="http://www.youtube.com/v/KBARrfcI_P8&amp;hl=en_US&amp;fs=1&amp;rel=0&amp;color1=0x3a3a3a&amp;color2=0x999999" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p dir="rtl">
<p dir="rtl">אז האם זה  &quot;Document Recovery task pane&quot; במובן של &quot;גרופן&quot; או במובן של &quot;גראפן&quot;?</p>
<p dir="rtl">אם נשים  לרגע את הצחוק בצד, למי מכם שלא יודע, ה&quot;Document Recovery task pane&quot; זו  החלונית שבה מופיעים כל המסמכים ש-Powerpoint שמר אוטומטית עבורכם לפני  שהתוכנה התרסקה. כלומר, אלה גרסאות של מצגות שלא שמרתם בפעם האחרונה שעבדתם  עליהן, וזו <strong>ההזדמנות האחרונה להציל אותן. </strong>האם אי אפשר  היה לכתוב משהו שאומר את זה?</p>
<h2 dir="rtl"><strong>סכנה 3:  עיצוב גראפי</strong></h2>
<p dir="rtl">בנוסף  לשינויים בטקסט, אפשר היה להציג משהו שימחיש את הסכנה.למשל, אפשר היה להציג  אייקון שמשקף סכנה מיידית, הרבה יותר מהמשולש הצהוב שמופיע ליד ההודעה.  כפי <a href="http://www.usable.co.il/archives/3110" target="_self">שכבר כתבתי כאן</a>,  המשולש הזה מציין, על-פי סטנדרט הממשק של מיקרוסופט, ש&quot;הממשק מראה מצב שעשוי להיות בעייתי בעתיד&quot;. זה אומנם  תיאור נכון של המצב, אבל הוא סוג של understatement &#8211; מדובר פוטנציאלית  באובדן בלתי-הפיך של עבודה.</p>
<p dir="rtl">היה אפשר,  למשל, להשתמש באייקון כזה (נלקח ממקינטוש):</p>
<p><img src="http://uniqui.co.il/emails/images/red_warning.jpg" alt="" /></p>
<p>אפשר היה לעשות כמה דברים נוספים בעיצוב:</p>
<ul>
<li>להציג את המסמכים שיימחקו כאייקונים מוקטנים</li>
<li>להציג את  העמודים שהשתנו במסמכים שנשמרו אוטומאטית לעומת הגירסה שהמשתמש שמר, כלומר &#8211; את מה שהמשתמש יאבד.</li>
<li>להדגיש בצורה חזקה (אות גדולה, בצבע אדום, למשל) את הטקסט שמסביר מה יקרה אם המשתמש אכן יצא מהמערכת.</li>
</ul>
<p>ויש כמובן פתרונות נוספים שאפשר לחשוב עליהם, כאלה שלא יסכנו את המשתמש באובדן מידע.</p>
<h2 dir="rtl"><strong>סכנה 4:  ברירות מחדל וכפתורי פעולה</strong></h2>
<p dir="rtl">ההודעה  הלקויה של Powerpoint הופכת לקריטית הרבה יותר כשלוקחים בחשבון שברירת  המחדל של כפתורי האפשרויות היא &quot;No&quot;, כלומר אם לחצתם באופן אוטומאטי OK,  שמסומן גם הוא כברירת מחדל, הקבצים שלכם הלכו. נמחקו. נעלמו. לנצח. כפי  שכבר כתבנו קודם, רוב האנשים לא קוראים מה כתוב בהודעה, ולכן הם פשוט ילחצו  על הדבר הראשון שנראה שיקדם אותם הלאה &#8211; כפתור ה-OK. <strong>הסכנה ברורה?</strong></p>
<h2 dir="rtl"><strong>סיכום</strong></h2>
<p dir="rtl">כדאי לתכנן את המערכת כך שהיא לא תכשיל את המשתמש ותגרום לו לבצע פעולות שהוא לא מעוניין בהן (action slips). פתרונות עיצוביים שונים עשויים לבטל את הצורך בהודעות כאלה בכלל, או לצמצם אותו משמעותית. אם מחליטים להציג הודעות כאלה, כדאי:</p>
<ul>
<li>לבדוק האם הן באמת נחוצות ולא סתם מטרידות</li>
<li>לנסח אותן בצורה תמציתית וברורה</li>
<li>להציג אותן בצורה שתשקף את החומרה שלהן</li>
<li>להשתמש בכפתורי הפעולה של ההודעה בברירות מחדל שלא יכשילו את המשתמש.</li>
</ul>
<p><strong>י</strong><strong>ש לכם עוד </strong>שיקולים שלא הצגתי כאן? דוגמאות להודעות אישור פעולה לא ברורות? אשמח לקרוא כאן בתגובות.</p>
<h6>התמונה שלמעלה: CC by <a href="http://cp.responder.co.il/link.php?lid=519598&amp;sid=20883623&amp;k=57d8d33ba61812f5673e09ed3e036832">adobemac</a></h6>
</div>]]></content:encoded>			<wfw:commentRss>http://www.usable.co.il/archives/3182/feed</wfw:commentRss>
		<slash:comments>30</slash:comments>
		</item>
		<item>
		<title>&#8235;המדריך לעולם חוויית המשתמש: ספר דיגיטלי במתנה&#8236;</title>		<link>http://www.usable.co.il/archives/3174</link>
		<comments>http://www.usable.co.il/archives/3174#comments</comments>
		<pubDate>Mon, 03 May 2010 20:55:44 +0000</pubDate>
		<dc:creator>&#8235;barak&#8236;</dc:creator>				<category><![CDATA[שמישות (שימושיות)]]></category>

		<guid isPermaLink="false">http://www.usable.co.il/?p=3174</guid>
		<description><![CDATA[&#8235;רבים שואלים אותי &#8211; איפה אפשר להכיר את תחום חוויית המשתמש בצורה מסודרת? אז נכון, יש את UXI.org.il, אבל אנשים עדיין מחפשים משהו מאורגן שאפשר לקרוא בו בנוחות. לכן הכנתי את &#34;המדריך לעולם חוויית המשתמש&#34; &#8211; ספר דיגיטלי שאתם יכולים להוריד אליכם ממש עכשיו.
כדי להוריד את המדריך:
http://uniqui.co.il/theguide
תהנו!
&#8236;]]></description>			<content:encoded><![CDATA[<div dir="rtl"><p><a href="http://uniqui.co.il/theguide"><img class="alignright size-full wp-image-3175" title="guide" src="http://www.usable.co.il/wp-content/uploads/2010/05/guide.jpg" alt="" width="200" height="225" /></a>רבים שואלים אותי &#8211; איפה אפשר להכיר את תחום חוויית המשתמש בצורה מסודרת? אז נכון, יש את UXI.org.il, אבל אנשים עדיין מחפשים משהו מאורגן שאפשר לקרוא בו בנוחות. לכן הכנתי את &quot;המדריך לעולם חוויית המשתמש&quot; &#8211; ספר דיגיטלי שאתם יכולים להוריד אליכם ממש עכשיו.</p>
<p>כדי להוריד את המדריך:<br />
<a href="http://uniqui.co.il/theguide" target="_blank">http://uniqui.co.il/theguide</a></p>
<p>תהנו!</p>
</div>]]></content:encoded>			<wfw:commentRss>http://www.usable.co.il/archives/3174/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>&#8235;עברית קשה שפה: שיעור בלשון ובתכנון בטפסים באתר אורנג&#039;&#8236;</title>		<link>http://www.usable.co.il/archives/3162</link>
		<comments>http://www.usable.co.il/archives/3162#comments</comments>
		<pubDate>Fri, 30 Apr 2010 05:46:37 +0000</pubDate>
		<dc:creator>&#8235;barak&#8236;</dc:creator>				<category><![CDATA[ביקורות אתרים]]></category>
		<category><![CDATA[בית-הספר לחוויית משתמש]]></category>
		<category><![CDATA[ממשק המשתמש UI]]></category>
		<category><![CDATA[שמישות (שימושיות)]]></category>

		<guid isPermaLink="false">http://www.usable.co.il/?p=3162</guid>
		<description><![CDATA[&#8235;קשה לי עם טעויות בעברית. אני יודע, זה לפעמים מעצבן כשאני מתקן אחרים, אבל זה הרגל משפחתי כזה, אינסטינקט, שקשה לוותר עליו. להורי היה חשוב להנחיל לנו הרגלי שפה טובים, וטפו טפו, אני חושב שדי הצליח להם. כשאני רואה טעויות בעברית בממשק זה מציק לי, וכשזה משולב עם טעויות בסיסיות בממשק, עם ספק בסדר-גודל של [...]&#8236;]]></description>			<content:encoded><![CDATA[<div dir="rtl"><p>קשה לי עם טעויות בעברית. אני יודע, זה לפעמים מעצבן כשאני מתקן אחרים, אבל זה הרגל משפחתי כזה, אינסטינקט, שקשה לוותר עליו. להורי היה חשוב להנחיל לנו הרגלי שפה טובים, וטפו טפו, אני חושב שדי הצליח להם. כשאני רואה טעויות בעברית בממשק זה מציק לי, וכשזה משולב עם טעויות בסיסיות בממשק, עם ספק בסדר-גודל של אורנג', אני משקיע וכותב על זה כמה מילים.</p>
<p><span id="more-3162"></span>בסוף כל חודש אני מקבל מאורנג' חשבונית במייל. טוב, לא בדיוק חשבונית, קישור להורדת חשבונית. שירות די נוח ומאובטח, האמת. לוחצים על קישור ומקבלים קוד חד-פעמי ב-sms, מכניסים אותו לטופס ואז מתחיל ה-download:</p>
<p><a href="http://www.usable.co.il/wp-content/uploads/2010/04/orange_misspell.png"><img class="alignnone size-full wp-image-3163" style="border: 1px solid black;" title="חשבונית במייל" src="http://www.usable.co.il/wp-content/uploads/2010/04/orange_misspell.png" alt="" width="441" height="204" /></a></p>
<p>הדבר הראשון שהפריע לי היתה הטעות בעברית: <strong>&quot;הקלד את הקוד זיהוי חד פעמי&quot;</strong>. ראשית, לדעתי זה צריך להיות &quot;חד-פעמי&quot; (עם מקף אמצעי). שנית, כשמוסיפים ה' הידיעה לסמיכות לא מוסיפים אותה בהתחלה. לא &quot;היום הולדת&quot; אלא &quot;יום ההולדת&quot;. זאת טעות נפוצה בדיבור, אבל שימוש בשפה נכונה בממשק זה עניין קדוש בעיני. זה לא אומר שצריך לכתוב ממשק עם שפה שדומה לזו של קרייני החדשות ברשת ב' (<a href="http://he.wikipedia.org/wiki/%D7%A8%D7%90%D7%95%D7%9E%D7%94_%D7%90%D7%9C%D7%93%D7%A8" target="_blank">ראומה אלדר</a> עם ר' מתגלגלת), אבל בטח צריך לעשות הגהה.</p>
<h2>הטופס</h2>
<p>בטופס יש רק שדה אחד, כפתור אחד והודעה אחת, ובכל זאת הצליחו להכניס בו לא מעט טעויות בסיסיות.</p>
<p>ראשית, השדה שבו צריך להקיש את הקוד כל-כך רחוק מהתווית שלו (זו עם הטעות בעברית), שאין ביניהם שום קשר. כתבתי כאן בעבר על <a href="http://www.usable.co.il/archives/1102" target="_blank">עקרונות הגשטאלט</a>, אבל למי שאין כוח לקרוא: אנחנו מקשרים בין אובייקטים כשהם קרובים אחד לשני. המיקום של השדה כל-כך רחוק לא מאפשר לנו להבין שהם קשורים.</p>
<p>שנית, ההודעה &quot;הקוד נשלח בהצלחה&quot; נראית כמו תגובה לתווית &quot;הקלד את הקוד&#8230;&quot;, במקום אישור שהפעולה שמתוארת בראש הטופס בוצעה (&quot;לצורך שמירה&#8230;&quot;). שוב &#8211; גשטאלט. ההודעה מתייחסת למה שהיא נמצאת הכי קרוב אליו. אם ההודעה היתה מתחת לשתי השורות שבראש הטופס, ומרווחת מההמשך שלו, היינו מבינים מיד את ההקשר שלה.</p>
<p>בנוסף, ההודעה &quot;הקוד נשלח בהצלחה&quot; בשילוב עם האייקון של ה-V הירוק היא חיזוק מצויין: היא אומרת &#8211; אצלנו הכל בסדר. מה שחסר בה הוא מידע חשוב &#8211; להיכן הקוד נשלח.</p>
<p>דבר אחרון בקשר למסך הזה, ואני אפתיע ואגיד שוב &#8211; גשטאלט! (תנסו להגיד גשטאלט 3 פעמים במהירות, קורע מצחוק), כפתור ה&quot;המשך&quot; נמצא פחות או יותר במקום הכי רחוק שאפשר מהשדה שבו מזינים את הקוד. הוא אמנם כתום ומושך את העין בצורה חזקה, אבל למה שהמשתמש יצטרך לחפש אותו? אם הוא היה ליד השדה של הקוד למשתמש לא היה סיכוי לפספס אותו.</p>
<p>ההודעה ב-SMS מגיעה משולח שנקרא &quot;Orange&quot; והיא נראית ככה: &quot;הקש מספר זה להמשך תהליך 999999". תקראו לי קטנוני, אבל אם באתר קוראים לזה &quot;קוד חד-פעמי&quot;, לא כדאי גם ב-SMS לקרוא לזה ככה? זה היה מקל על הקישור בין השניים. עוד עניין, יכול להיות שאת החשבון מקבל מישהו שלא מחזיק בטלפון ביד כרגע. למשל &#8211; אב המשפחה מקבל אותו עבור הטלפון של הבת שלו, והבת לא בבית כרגע. מה היא תחשוב כשהיא תקבל את ההודעה?</p>
<p><strong>אני מציע את העיצוב החדש הזה:</strong></p>
<p><strong><a href="http://www.usable.co.il/wp-content/uploads/2010/04/orange_misspell_fix2.png"><img class="alignnone size-full wp-image-3167" style="border: 1px solid black;" title="הצעה לעיצוב מחדש" src="http://www.usable.co.il/wp-content/uploads/2010/04/orange_misspell_fix2.png" alt="" width="441" height="204" /></a><br />
</strong></p>
<ul>
<li>העברתי את &quot;הקוד נשלח בהצלחה&quot; קרוב להודעה בראש הטופס. כך ברור שהם קשורים.</li>
<li>שיניתי את ההודעה ל&quot;קוד הזיהוי נשלח בהצלחה ל-&#8230;..&quot;, ומכאן והלאה הוא נקרא באופן עקבי &quot;קוד זיהוי&quot; ולא &quot;מספר&quot; ולא &quot;הקוד זיהוי חד פעמי&quot;</li>
<li>החלפתי את התווית &quot;הקלד את הקוד זיהוי חד פעמי&quot; ב&quot;הקלד את קוד הזיהוי&quot;. זו ההנעה לפעולה ש</li>
<li>הצמדתי את השדה של קוד הזיהוי לתווית שלו.</li>
<li>העברתי את כפתור ה&quot;המשך&quot; אל מתחת לשדה הקוד, והצרתי אותו מעט (סתם בשביל האסתטיקה).</li>
</ul>
<p>את ה-SMS הייתי משנה ל&quot;הקלד קוד זיהוי זה להמשך התהליך באתר אורנג': 999999". כך השם הוא &quot;קוד זיהוי&quot; כמו בטופס, וגם ברור למי שקיבל את ההודעה שקורה משהו עם הקו שלו באתר אורנג'.</p>
<h2>נשמע הגיוני?</h2>
<p>מה דעתכם על השינוי הזה? הייתם משנים עוד דברים כאן? כרגיל, אשמח לשמוע את דעתכם.</p>
</div>]]></content:encoded>			<wfw:commentRss>http://www.usable.co.il/archives/3162/feed</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
		<item>
		<title>&#8235;אבטחת מידע: מה באמת עובד?&#8236;</title>		<link>http://www.usable.co.il/archives/3147</link>
		<comments>http://www.usable.co.il/archives/3147#comments</comments>
		<pubDate>Sun, 18 Apr 2010 12:19:11 +0000</pubDate>
		<dc:creator>&#8235;barak&#8236;</dc:creator>				<category><![CDATA[בית-הספר לחוויית משתמש]]></category>
		<category><![CDATA[ממשק המשתמש UI]]></category>
		<category><![CDATA[שמישות (שימושיות)]]></category>

		<guid isPermaLink="false">http://www.usable.co.il/?p=3147</guid>
		<description><![CDATA[&#8235;כתבה חדשה שלי באתר UXI, על סיסמאות, שמות משתמש, ועוד כמה אמצעים שנועדו להגן על המידע של המשתמשים שלכם (ושלכם) באתרים השונים. מה מהם יוצרים אבטחה יעילה בשילוב עם חוויית משתמש טובה? תציצו בכתבה ותגלו&#8230;
http://uxi.org.il/pages/1789
&#8236;]]></description>			<content:encoded><![CDATA[<div dir="rtl"><p>כתבה חדשה שלי באתר UXI, על סיסמאות, שמות משתמש, ועוד כמה אמצעים שנועדו להגן על המידע של המשתמשים שלכם (ושלכם) באתרים השונים. מה מהם יוצרים אבטחה יעילה בשילוב עם חוויית משתמש טובה? תציצו בכתבה ותגלו&#8230;</p>
<p><a href="http://uxi.org.il/pages/1789" target="_blank">http://uxi.org.il/pages/1789</a></p>
</div>]]></content:encoded>			<wfw:commentRss>http://www.usable.co.il/archives/3147/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>&#8235;לאומי מזהיר: הפעולה בוצעה בהצלחה. על חשיבותם של סטנדרטים&#8236;</title>		<link>http://www.usable.co.il/archives/3110</link>
		<comments>http://www.usable.co.il/archives/3110#comments</comments>
		<pubDate>Thu, 15 Apr 2010 06:50:41 +0000</pubDate>
		<dc:creator>&#8235;barak&#8236;</dc:creator>				<category><![CDATA[בית-הספר לחוויית משתמש]]></category>
		<category><![CDATA[ממשק המשתמש UI]]></category>
		<category><![CDATA[שמישות (שימושיות)]]></category>

		<guid isPermaLink="false">http://www.usable.co.il/?p=3110</guid>
		<description><![CDATA[&#8235;יש סטנדרטים מקובלים לאייקונים (צלמיות בעברית) שמצורפים להודעות למשתמש, גם לאייקון עצמו וגם לצבע שלו. כששוברים את הסטנדרטים האלה נוצר בלבול. דוגמה מבנק לאומי שמדגימה את זה מצויין, וכמה מילים על החשיבות של סטנדרטים בממשק ובחוויית המשתמש.

זהירות, הצלחת!
נכנסתי לחשבון הבנק שלי כדי לעדכן את הסיסמה, ולאחר השינוי קיבלתי את ההודעה הזו:

כשאנחנו מקבלים הודעה מהסוג הזה, [...]&#8236;]]></description>			<content:encoded><![CDATA[<div dir="rtl"><p><img class="alignright size-full wp-image-3119" style="margin-left: 20px; ;" title="זהירות, הצלחת!" src="http://www.usable.co.il/wp-content/uploads/2010/04/thumb.gif" alt="זהירות, הצלחת!" width="108" height="94" />יש סטנדרטים מקובלים לאייקונים (צלמיות בעברית) שמצורפים להודעות למשתמש, גם לאייקון עצמו וגם לצבע שלו. כששוברים את הסטנדרטים האלה נוצר בלבול. דוגמה מבנק לאומי שמדגימה את זה מצויין, וכמה מילים על החשיבות של סטנדרטים בממשק ובחוויית המשתמש.</p>
<p><span id="more-3110"></span></p>
<h2 style="clear:both">זהירות, הצלחת!</h2>
<p>נכנסתי לחשבון הבנק שלי כדי לעדכן את הסיסמה, ולאחר השינוי קיבלתי את ההודעה הזו:</p>
<p><img class="aligncenter size-full wp-image-3111" title="leumi-warning" src="http://www.usable.co.il/wp-content/uploads/2010/04/leumi-warning.png" alt="leumi-warning" width="464" height="222" /></p>
<p>כשאנחנו מקבלים הודעה מהסוג הזה, שיש לה גם אייקון, אנחנו מעבדים אותה בשלושה שלבים:</p>
<ul>
<li>
<div id="attachment_3113" class="wp-caption alignleft" style="width: 91px"><a href="http://lib.cet.ac.il/pages/item.asp?item=13242&amp;kwd=7370" target="_blank"><img class="size-full wp-image-3113 " title="תמרור א-40" src="http://www.usable.co.il/wp-content/uploads/2010/04/warning-a-40.gif" alt="תמרור א-40" width="81" height="68" /></a><p class="wp-caption-text">תמרור א-40</p></div>
<p>אנחנו רואים את הדבר הגדול והבולט ביותר &#8211; האייקון. זה שכאן מסמל בעולם התוכנה &quot;אזהרה&quot; (warning) ובעולם התמרורים &#8211; &quot;מקום מסוכן&quot;.</li>
<li>אנחנו רואים את הטקסט שליד האייקון.</li>
<li>אנחנו קוראים את הטקסט ליד. לא תמיד זה קורה, לפעמים סתם סוגרים את חלון ההודעה ומתעלמים מהטקסט.</li>
</ul>
<p>כשקיבלתי את ההודעה הזו הדבר הראשון שקרה זה שניסיתי לחשוב מה עשיתי לא נכון בבחירת הסיסמה. <a href="http://www.holesinthenet.co.il/archives/7662" target="_blank">כבר כתבתי </a>על הטקסט הלא ברור שמסביר איך לבחור סיסמה בלאומי. מיד שיערתי שטעיתי. לפני שסגרתי את החלון, הצצתי על הטקסט, ואז גיליתי שהסיסמה דווקא בסדר. למה זה קרה?</p>
<h2>אייקונים מוסכמים להודעות</h2>
<p><a href="http://msdn.microsoft.com/en-us/library/aa511277.aspx" target="_blank">בהנחיות</a> שמיקרוסופט נותנת ליישומים ב-Windows מופיעים האייקונים הבאים:</p>
<p><a href="http://msdn.microsoft.com/en-us/library/aa511277.aspx"><img class="size-full wp-image-3115 alignnone" title="STD-WINDOWS" src="http://www.usable.co.il/wp-content/uploads/2010/04/STD-WINDOWS.png" alt="STD-WINDOWS" width="256" height="80" /></a></p>
<p>ההנחיות ברורות:</p>
<ul>
<li>X &#8211; הממשק מראה שגיאה או בעיה שהתרחשו.</li>
<li>! &#8211; הממשק מראה מצב שעשוי להיות בעייתי בעתיד.</li>
<li>i &#8211; הממשק מראה מידע שימושי.</li>
<li>? &#8211; הממשק מראה נקודת כניסה למערכת העזרה</li>
</ul>
<p>במקינטוש יש גם אייקונים סטנדרטיים שמשמשים באופן דומה, למשל אלה:<br />
<img class="size-full wp-image-3116 alignnone" title="mac" src="http://www.usable.co.il/wp-content/uploads/2010/04/mac.jpg" alt="mac" width="150" height="69" /></p>
<p>במקינטוש נוהגים גם להצמיד אליהם בפינה את האייקון של היישום שהעלה את ההודעה.</p>
<p>ברשת נהוג להשתמש בצבע הירוק ובסימן ה-V כדי לציין הצלחה. כך למשל בטוויטר:</p>
<p><img class="aligncenter size-full wp-image-3117" title="ok" src="http://www.usable.co.il/wp-content/uploads/2010/04/ok.png" alt="ok" width="575" height="59" /></p>
<p>במקרה של לאומי למעלה, היה נכון להשתמש באייקון כזה, ובצבע הירוק, כדי להבהיר למשתמש באופן מיידי שהכל בסדר. הנה משהו פשוט שאני בישלתי, שמראה איך זה היה עשוי להיראות:</p>
<p><img class="aligncenter size-full wp-image-3128" title="leumi-ok" src="http://www.usable.co.il/wp-content/uploads/2010/04/leumi-ok.png" alt="leumi-ok" width="431" height="214" /></p>
<h2>חשיבות השימוש בסטנדרטים</h2>
<p>סטנדרטים עובדים כי הם סטנדרטיים. טוב, זאת הגדרה מעגלית קצת, אני יודע. הכוונה שלי היא שבגלל שברוב המקומות משתמשים באותם סימנים מוסכמים, למשל סימן קריאה שמסמן אזהרה (&quot;עשוי להיות בעייתי בעתיד&quot;), אנחנו מבינים את המשמעות שלהם באופן מיידי כשאנחנו מתבוננים בהם. שימוש שגוי בסימנים מוסכמים, סטנדרטיים, גורם לשני דברים לא מוצלחים במיוחד:</p>
<ul>
<li>בלבול רגעי. המשתמש נאלץ להתאמץ, למשל לקרוא את הטקסט שצמוד לאייקון.</li>
<li>החלשה של תפיסת משמעות הסטנדרט. בפעם הבאה שהמשתמש ייתקל בסימן המוסכם, הוא לא יסמוך על המשמעות המיידית שלו, וישקיע יותר זמן בקריאת הטקסט. גם אם זה ביישום אחר.</li>
</ul>
<p>סטדנרטים קיימים לא רק באייקונים של הודעות שגיאה. הם קיימים בהרבה מקומות בממשק. למשל, מוסכם בהודעת אימייל שיש &quot;Reply&quot; כדי להשיב לכותב, ו-&quot;Reply to All&quot; בשביל להשיב לכל הנמענים.</p>
<p>ב-<a href="http://groups.google.com">Google Groups</a> ניתן להגדיר רשימת תפוצה באימייל כך שב-Reply רגיל על הודעה שנשלחה לרשימה יקבלו את התשובה כל חברי הקבוצה. זה שימושי, כמובן, כדי ליצור דיאלוג בין החברים, אבל זה יוצר בדיוק את שני הדברים שהזכרתי כאן למעלה:</p>
<ul>
<li>בפעם הראשונה שזה קורה לחבר מהקבוצה הוא מופתע במקרה הטוב, או כועס במקרה הרע, אם ההודעה שנועדה לאדם ספציפי נשלחה לכל הקבוצה. זה עשוי להיות ממש לא נעים&#8230;</li>
<li>התקלה הראשונה מערערת אצלו את האמון ש-Reply ישלח את ההודעה רק לכותב. בכל פעם שהוא יעשה Reply מכאן והלאה, לפחות לתקופה מסויימת, הוא יבדוק טוב  טוב למי נשלחת התגובה.</li>
</ul>
<h2>זה קרה גם לכם?</h2>
<p>אתם מוזמנים להפנות אותי ואת שאר הקוראים למקומות שבהם נשברו סטנדרטים, ואיך היתה החווייה שלכם באותו המקרה.</p>
</div>]]></content:encoded>			<wfw:commentRss>http://www.usable.co.il/archives/3110/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>&#8235;תבנית סלחנית Forgiving Format&#8236;</title>		<link>http://www.usable.co.il/archives/3027</link>
		<comments>http://www.usable.co.il/archives/3027#comments</comments>
		<pubDate>Sun, 14 Mar 2010 12:17:30 +0000</pubDate>
		<dc:creator>&#8235;barak&#8236;</dc:creator>				<category><![CDATA[ביקורות אתרים]]></category>
		<category><![CDATA[בית-הספר לחוויית משתמש]]></category>
		<category><![CDATA[דפוסי עיצוב]]></category>
		<category><![CDATA[שמישות (שימושיות)]]></category>

		<guid isPermaLink="false">http://www.usable.co.il/?p=3027</guid>
		<description><![CDATA[&#8235;
כשמקלידים מידע בטופס, נדרשים לא פעם להכניס מספרים בתבנית מסויימת: מספר טלפון חייב קידומת, כרטיסי אשראי צריך לפעמים להפריד לקבוצות של 4 ולפעמים לא, תאריכים צריך להכניס עם קו נטוי אבל לפעמים עם נקודה וכן הלאה.
&#34;תבנית סלחנית&#34;, באנגלית forgiving format, הוא עקרון עיצוב פשוט, שאומר: תנו למשתמשים להקליד מה שהם רוצים, ונסו להסתדר לבד עם [...]&#8236;]]></description>			<content:encoded><![CDATA[<div dir="rtl"><p><img class="size-full wp-image-3042 alignright" style="margin: 0px 0px 20px 20px" title="אני סולחת לך, בן" src="http://www.usable.co.il/wp-content/uploads/2010/03/forgive.jpg" alt="אני סולחת לך, בן" width="108" height="127" /></p>
<p>כשמקלידים מידע בטופס, נדרשים לא פעם להכניס מספרים בתבנית מסויימת: מספר טלפון חייב קידומת, כרטיסי אשראי צריך לפעמים להפריד לקבוצות של 4 ולפעמים לא, תאריכים צריך להכניס עם קו נטוי אבל לפעמים עם נקודה וכן הלאה.</p>
<p>&quot;תבנית סלחנית&quot;, באנגלית forgiving format, הוא עקרון עיצוב פשוט, שאומר: תנו למשתמשים להקליד מה שהם רוצים, ונסו להסתדר לבד עם מה שהם נתנו. <strong>תסלחו להם על טעויות קטנות</strong>, אם אפשר. מכאן השם &#8211; תבנית סלחנית.</p>
<p><span id="more-3027"></span></p>
<h2 style="clear:both">דברים קטנים אבל מעצבנים</h2>
<p>הכותרת הזו היא השם של מערכון משעשע של דודו טופז ז&quot;ל, מאותה תוכנית שהיה בה מערכון &quot;<a href="http://www.youtube.com/watch?v=lPdx9Fabylk" target="_blank">משה והאורנג'דה</a>&quot; המפורסם, פליטת פה. אח, אח, שנות ה-80. בטפסים יש שפע של דברים קטנים ומעצבנים, ותבנית סלחנית עוזרות להתגבר על חלק מהם.</p>
<p>הנה דוגמה לתבנית <strong>לא סלחנית </strong>מתוך המערכת <a href="http://flex.co.il">flex</a> הישראלית לניהול חשבונות:</p>
<div id="attachment_3029" class="wp-caption aligncenter" style="width: 410px"><img class="size-full wp-image-3029 " style="border: 0pt none;" title="תבנית לא סלחנית" src="http://www.usable.co.il/wp-content/uploads/2010/03/checkdate.png" alt="תבנית לא סלחנית" width="400" height="162" /><p class="wp-caption-text">flex. לא סולחת ולא שוכחת.</p></div>
<p style="text-align: right;">למקרה שלא הבנתם את הודעת השגיאה, הייתי צריך להקליד כאן 11/<span style="color: #008000;"><strong>0</strong></span>3/2010 ולא 11/3/2010. ברור, לא? כמה היה עולה לתכנת שדה שיודע להבין גם 11/3/2010 ולא רק 11/03/2010? שלא לדבר על 11-3-10 או 11.3.10. במקרה של flex הטעות חמורה אפילו יותר, כי יש כאן מקום להזנת תאריך, אבל אי אפשר לבחור מלוח שנה כמקובל בשדות תאריך. כך שכל מי שרוצה להזין תאריך לעשות את זה לפי איך שהמתכנת של השדה הזה הסכים לקבל תאריכים &#8211; his way or the highway.</p>
<p style="text-align: right;">בקצה השני של הסקלה: Google Maps. אפשר להזין שם של מקום בכל צורה שהיא, והוא ינסה להבין מה הכוונה. שם של מקום הוא הרבה יותר מסובך מתאריך, וכדי להבין אותו כראוי נדרשים הרבה יותר משאבי פיתוח. שימו לב שכתבתי <strong>יור</strong>שלים ולא <strong>ירו</strong>שלים, ועדיין קיבלתי תוצאה.</p>
<div id="attachment_3030" class="wp-caption aligncenter" style="width: 609px"><img class="size-full wp-image-3030" title="תחנה מרכזית יורשלים" src="http://www.usable.co.il/wp-content/uploads/2010/03/merkazit.png" alt="merkazit" width="599" height="343" /><p class="wp-caption-text">גם טדי קולק ז&quot;ל היה מסתדר עם המפות של גוגל, יוּרשלים</p></div>
<h2>תאריכים סלחניים</h2>
<p>ב-Outlook יש דוגמה מצויינת לתבנית סלחנית לתאריך. אם אני רוצה לקבוע פגישה ליום רביעי הקרוב, אני יכול להשתמש בתאריך מובנה:</p>
<ul>
<li>17-3-2010</li>
<li>17/3/2010</li>
<li>17.03.2010</li>
</ul>
<p>אני יכול להשתמש בתאריך מקוצר:</p>
<ul>
<li>17/3</li>
<li>17</li>
</ul>
<p>וגם ביום:</p>
<ul>
<li>Wednesday</li>
<li>Wed</li>
</ul>
<p>אפשר גם ברביעי הבא:</p>
<ul>
<li>Wed Week</li>
<li>Wed W</li>
</ul>
<p>וכן הלאה. כמה זה מסובך לתכנן ולתכנת את זה? לא מאוד. וזה יכול לעבוד בכל שדה תאריך.</p>
<p>ב-Google Calendar לקחו את זה עוד צעד, ונתנו לקבוע את כל פרטי הפגישה דרך שדה טקסט אחד. הם גם נותנים, כמובן, לכתוב קיצורים ולהשתמש בתבניות וניסוחים שונים. שני הניסוחים האלה יעבדו וייצרו את אותה הפגישה:</p>
<ul>
<li>Dinner with John tonight at 19:00</li>
<li>Dinner at 19:00 with John</li>
<li>7pm dinner with John</li>
</ul>
<div id="attachment_3037" class="wp-caption aligncenter" style="width: 426px"><img class="size-full wp-image-3037" title="הוספה מהירה בלוח השנה של גוגל" src="http://www.usable.co.il/wp-content/uploads/2010/03/quickadd.png" alt="הוספה מהירה בלוח השנה של גוגל" width="416" height="88" /><p class="wp-caption-text">הוספה מהירה בלוח השנה של גוגל</p></div>
<h2>עמודי נחיתה סולחים בקלות</h2>
<p>בטפסים שמופיעים בעמודי נחיתה (landing pages) יהיה בדרך-כלל שימוש נרחב בתבנית סלחנית. עמודי נחיתה הם כאלה שמגיעים אליהם כשמקליקים על באנרים פרסומיים ולפעמים גם מתוצאות חיפוש בגוגל. דיברתי עליהם כאן בפודקאסט לפני כמה שבועות עם תמיר, <a href="http://www.usable.co.il/archives/2872">אתם יכולים להקשיב</a>.</p>
<p>הסיבה שטפסים בעמודי נחיתה ישתמשו בדרך-כלל בתבנית סלחנית היא די ברורה: המטרה שלהם היא לאסוף מידע מהמשתמשים שהגיעו אליהם. הם לא רוצים לשים שום מכשול בפני המשתמשים בתהליך מסירת המידע, ולכן יעשו הכל כדי שהזנת המידע תעבור חלק. הנה למשל דוגמה מפרסומת:</p>
<div id="attachment_3033" class="wp-caption aligncenter" style="width: 335px"><img class="size-full wp-image-3033" title="טופס בעמוד נחיתה שאוכל הכל (כמעט)" src="http://www.usable.co.il/wp-content/uploads/2010/03/ad1.png" alt="ad1" width="325" height="220" /><p class="wp-caption-text">טופס בעמוד נחיתה שאוכל הכל (כמעט)</p></div>
<p style="text-align: right;">
<p style="text-align: right;">תאמינו או לא, אבל הטופס קיבל את התוכן הזה כתקין. אני לא יודע אם הייתי הולך כל-כך רחוק, מספר הטלפון פה הוא שגוי באופן ברור, אבל מצד שני &#8211; חלק התוכנה שבודק את תקינות השדות לא יכול לדעת, אולי המשתמש הזין אימייל תקין וקשקש משהו סתם בטלפון כי הוא לא רוצה שייפנו אליו באמצעות הטלפון?</p>
<p style="text-align: right;">במקרה שלמעלה הפרסומת היא לדירת יוקרה; פרטים על מתעניינים רלוונטיים (leads) שווים הרבה כסף, ובשביל להגיע אליהם מוכנים גם <strong>להשקיע בסינון אנושי </strong>של פרטי הפונים הלא-רלוונטיים. לכן הבחירה של המתכנת או המעצב כאן, לקבל את הטלפון הזה כתקין, היא נכונה בעיני.</p>
<h3 style="text-align: right;">לבחור קידומת טלפון מרשימה? למה?</h3>
<p style="text-align: right;">יש עמודי נחיתה שעושים את זה פחות טוב:</p>
<p style="text-align: right;">
<div id="attachment_3034" class="wp-caption aligncenter" style="width: 346px"><img class="size-full wp-image-3034" title="למה צריך לבחור את הקידומת מרשימה?" src="http://www.usable.co.il/wp-content/uploads/2010/03/ad2.png" alt="למה צריך לבחור את הקידומת מרשימה?" width="336" height="115" /><p class="wp-caption-text">למה צריך לבחור את הקידומת מרשימה?</p></div>
<p>למה להכריח את המשתמש לעבור לעכבר (או להשתמש בקיצור מקלדת &#8211; למי שידוע) כדי לפתוח את הרשימה, לבחור את הקידומת הנכונה ואז להשלים את שאר המספר בהקלדה. הרי הרבה יותר קל ואינטואיטיבי לנו פשוט להקליד את 10 הספרות של הטלפון שלנו, אולי עם &#8211; מפריד או סוגריים, ולהמשיך הלאה. נראה שמי שתכנן את הטופס הזה פשוט העתיק מאיזה מקום אחר שגם עשה כזה, בלי לחשוב על מי שישתמש בזה.</p>
<p>בכלל, לבחור קידומת טלפון מרשימה זה רעיון גרוע, אל תעשו את זה. אפשר תמיד לבדוק אם הקידומת של הטלפון תקינה אחרי ההקלדה.</p>
<p>ולמה הפרוייקט הוא טקסט חופשי? דווקא כאן היה נכון לתת לבחור ולא טקסט החופשי. הדף שהטופס מופיע בו מציג כמה פרויקטים, אין שום סיבה לבחון את הבנת הנקרא של המשתמשים&#8230;</p>
<h2>תבנית סלחנית &#8211; דפוס עיצוב</h2>
<p>הזכרתי כאן <a href="http://uxi.org.il/quick/design-patterns">דפוסי עיצוב</a>, Design Patterns, לא פעם בעבר. אפשר לשמוע על הנושא ב<a href="http://www.usable.co.il/archives/2892">פודקאסט על דפוסי עיצוב</a> שבו שוחחתי עם רן לירון. &quot;תבנית סלחנית&quot; הוא דפוס עיצוב חשוב, ואפשר למצוא עוד דוגמאות שלו באתרי דפוסי העיצוב השונים:</p>
<ul>
<li>ב-<a href="http://quince.infragistics.com/#/Search/ViewPattern$pattern=Forgiving+Format">Quince</a></li>
<li>ב-<a href="http://ui-patterns.com/pattern/ForgivingFormat" target="_blank">UI-Patterns</a></li>
<li>ב-<a href="http://designinginterfaces.com/Forgiving_Format">Designing Interfaces</a> (האתר של הספר)</li>
<li><a href="http://uxi.org.il/quick/design-patterns" target="_blank">ב-UXI עוד אין</a>, אבל יהיה בקרוב&#8230; ויש שם גם כמה דפוסי עיצוב אחרים.</li>
</ul>
</div>]]></content:encoded>			<wfw:commentRss>http://www.usable.co.il/archives/3027/feed</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
	</channel>
</rss>

