למי שבכל שנה מתלבט/ת מחדש – איזו ברכה לשלוח, ואיך לנסח מילים לשנה החדשה,
העליתי אליכם כאן שלושה עיצובים שלי לשלוש איגרות ברכה לראש השנה ולתקופת החגים בכלל.
שנה טובה 🙂

לחצו על תמונה כדי להוריד את הברכה…


Happy-Holidays-HY-1


Happy-Holidays-HY-2


Happy-Holidays-HY-3

רוצים לראות עוד ברכות? יש גם כאן!

הברכות מוצעות כפי שהן, לשימוש חופשי בלתי-מסחרי (CC BY-NC-ND 4.0).

http://www.pixelperfect.co.il/posts/a-good-designer-is-a-happy-one-webvisions-2015-roundup/

http://uxi.org.il/pages/18992

אני מעצבת חוויות משתמש כבר יום-יומיים, שנה-שנתיים, ויש פרמטרים רבים מאוד שמשפיעים על עיצוב מוצלח.

להכיר את הפרטים הקטנים של כלי העבודה שלנו זה חשוב – אבל זה נלמד ונרכש. מעבר לזה, דרוש חזון, הסתכלות נכונה, ראייה אומנותית, רעיון טוב, השראה ועוד. לא פעם, ראיתי מקרים בהם בחירת תמונות גרועה “הרסה” עיצוב מוצלח – השפיעה על כל הפרוייקט ופגעה בחוויה כולה. דבר סתמי מבחינתי, כי אני באמת מאמינה שהשקעה בבחירת תמונה טובה יותר היתה יכולה “להציל” את המצב.

כיום, רוב העיצובים שאני רואה מבוססים ברובם על תמונה מוצלחת, בין היתר במטרה “לנקות” את הממשק כמה שיותר. פני הדברים כיום הן שתמונות הפכו להיות מרכיב מרכזי בכל עיצוב, במטרה “לנקות” ממשקים מרעש רקע – לכן מה שנשאר היום זה תמונה, טקסט וכפתור, בלי אלמנטים רבים מעבר לכך. במובן הזה, יותר מונח על כתפיו של המעצב, היות ועליו לדעת ליצור ייחוד, עם הנתונים הללו.

Photos in DesignPhoto and description

כמה אסונות נפוצים:

באתרים:

יש לא מעט מקרים לאחרונה שבהם חוויית השימוש כוללת תמונה גדולה המקבלת את פני הגולש כשהוא נכנס (וביותר קצר: תמונת “ספלאש” – אתם בטח מכירים את המונח). חוויית השימוש נקבעת כבר בשלב ההתחלתי הזה – כשגולש רואה את השקופית הראשונה בסליידר או את התמונה הממלאת את המסך. נתקלתי לא מעט בתמונות לא טובות מבחינת רזולוציה, קומפוזיציה, התאמת צבעים וכן הלאה – וכמעצבת בחרתי להמשיך הלאה לאתר הבא ולא להתעניין בכלל.

בממשקים:

גם ה-flow הכי טוב בעולם יכול לקבל פוקוס זניח במידה והתמונה שהגולש נתקל בה אינה טובה. כל ה”לוק אנד פיל” של המערכת יספוג מכה קשה במידה והמערכת מלווה בתמונות שאינן מייצגות נאמנה את הרעיון.

בסקיצות ללקוח:

כשמגישים ללקוח סקיצות או מוקאפים, תמונות טובות יסייעו לכם להעביר את המסר מהפעם הראשונה. אין מה לעשות – לקוח לא תמיד “יראה מעבר” לפלייס-הולדרים, וראיתי מצבים שבהם ההבדל בין שלילת סקיצה לאישור סקיצה היו במקרה הזה החלפת ה-תמונות סתמיות/מפוקסלות/האיקסים אפורים בתמונות ממשיות (וזאת, בלי לבצע שום שינוי נוסף!). תחסכו לעצמכם זמן עבודה בהמשך, בכך שתשקיעו עוד כמה דקות כעת, בהצבת תמונות טובות כבר בשלב הראשוני.

נכון שרוב המעצבים מעדיפים לעבוד עם החומרים של הלקוח (נושאי מקוריות, זכויות, חיסכון וכן הלאה), אבל בואו נכיר בכך – לפעמים, החומרים של הלקוח פשוט לא טובים או איכותיים מספיק. במקרים כאלו לפעמים אעדיף לרכוש תמונה מתאימה ולייצג את החזון האישי שלי, ולא להשתמש במה שהלקוח שלח.

מה כן עושים?

לאחר שהסברתי את החשיבות של בחירת תמונות טובה, אשתף אתכם בכמה “סודות מקצועיים” שאני אישית משתמשת בהם, ואתן לכם כמה טיפים שיעזרו לכם לבחור את התמונה המתאימה ביותר, מעבר לאינסטינקטים האישיים והראייה העיצובית הייחודית שלכם.

טיפים על חשבון הבית!

– תמונות שמייצגות את המוצר או המערכת. מסתבר שזה לא ברור מאליו, כי יצא לי לראות סקיצה של אתר שעוסק בנושא טכנולוגי, והפלייס-הולדר היה תמונה של ילד אוכל באגט. אין קשר – הלקוח לא יבין שמדובר בממלא מקום בהכרח, וזה “יצרום” בעין. יחד עם זאת, הבעיה העיקרית היא שנוצרת ציפייה שאינה מתממשת וזה פוגע באמון.

– אימג’ הרמוני, שמשתלב היטב בעיצוב. גם זה משהו שאמור להיות ברור מאליו לדעתי – אבל הוא לא. התמונה צריכה להתאים, להיראות כחלק מהמערכת או האתר מבחינת סגנון. הכוונה כאן היא לסוג התמונה. לפעמים לא יהיה נכון להשתמש בתמונה הומוריסטית, רצינית, אומנותית (מדי) וכן הלאה. תמונה טובה לא תתחרה באלמנטים אחרים, אלא תוסיף להם.

– תמונה שמעבירה מסר. אין סיבה שלא תעביר, למעשה! חשבו מה המוצר “בא להגיד”, ו”דברו” דרך תמונות מתאימות. פה יש הזדמנות לעשות משהו שאינו גנרי, ולכן תמונה שכוללת אמירה כלשהי, יוצרת תחושה מסויימת או גורמת לסטייט-אוף-מיינד אצל הצופה, תהיה עדיפה תמיד.

– תמונה שנראית טוב. מותר לערוך תמונה! על פוטושופ שמעתם 🙂 קצת משחק עם צבע, חיתוך או תיחום טובים יותר מהמקור עשויים להביא למצב שבו התמונה תעביר את המסר בצורה טובה בהרבה. כמו כן, דאגו לקבצי מקור איכותיים – שאינם מפוקסלים או מטושטשים. אסור להראות תמונה מפוקסלת, בעלת איכות נמוכה – היא תיצור תחושה לא נעימה.

– בקשה אישית: נסו לצמצם בכמות תמונות הסטוק הנפוצות. אנחנו כמעצבים כבר מכירים את הכל, והמשתמשים עצמם כבר מתחילים לזהות את התמונות והדוגמנים מעשרים מקומות שבהם ראו את אותה התמונה. עצבו משהו משלכם, בצעו מניפולציה לתמונת לקוח, צרו משהו חדש – רק נסו להציע משהו שטרם נראה.

– שאפו לקשר בין סגנונות של תמונות – השתמשו בתמונות מעולם תוכן דומה, תמונות מאותו סט וכן הלאה. הטיפ הזה נועד להביא לכך שתהיה אחידות עיצובית וסדר בעין.

– תנו עדיפות לחומר מקורי של הלקוח – אלא אם כן התמונות גרועות. כבר ציינתי את זה – גם מבחינת זכויות, גם מבחינת אמינות, יש עדיפות ברורה לחומר שהלקוח עצמו מעביר. אבל – לא בכל מחיר! אם התמונות פשוט לא טובות, לא הייתי מציעה להשתמש בהן בכוח.

Photos in Websites
Kyle Scollin – Dribbble

מילה לצלמי סטוק

על מנת שהתמונות שלכם יימכרו היטב, הקלו על המעצבים!

צרו תמונה שמכילה גם איזור שניתן יהיה להשתמש בו לצורך מיקום טקסט, המעיטו בשימוש בטקסטורות קונטרסטיות מדי על אותו משטח. כדאי שיישאר למעצב אזור נקי וזמין לשימוש. אל תחתכו תמונה יתר על המידה, הותירו לנו את היכולת לעשות זאת ולוותר על החלקים שאנחנו בוחרים לוותר עליהם – לא תמיד אפשר להשלים שיער או חולצה של מישהו. כידוע, פתרון למעצבים בהקשר הזה – טשטוש אזורים בתמונות שמקטין קונטרסט – ואז הטקסט בולט ונוח יותר לקריאה.

לסיכום

אני מקווה שנתתי קצת חומר למחשבה, ומאמינה שתמונות טובות עשויות לשפר את העבודה והסקיצה לאין שיעור. גם אם זה ממלא מקום, תמונת אווירה, או משהו שמלווה מערכת גדולה יותר – לתמונות יש השפעה מתמשכת, שאינה ניכרת תמיד בהתבוננות ראשונית. אם אתם רוצים להתבלט באמת ולהשיג את המטרה – שלבו תמונות טובות, מתאימות, שהושקע זמן והושקעה מחשבה בבחירתן – ותראו איך עבודתכם משתפרת. לאחר כמה פעמים כאלו, אני מאמינה שתכניסו את זה לשגרת העבודה שלכם, והשקעת הזמן תצדיק את עצמה בכל פעם ופעם.

מעבר לכך, אנחנו רואים תמונה הופכת לחלק עיקרי יותר ויותר בעיצוב, וניתן לראות זאת קורה במגוון רחב של דוגמאות: אתרים ועמודי נחיתה שהפכו ברובם לתמונה, נגני מוזיקה בהם מרכז האפליקציה היא תמונה גדולה של האלבום. אפילו פייסבוק השכילו להבין כי התמונות עושות את העבודה, יוצרות יותר חשק ומפעילות את הרגש, ושינו את תצוגת הפוסטים שלהם כך שהתמונה בפוסט היא המרכז והגדילו אותה משמעותית.

אשמח לראות תמונות שבחרתם לפרויקטים שלכם!

הילה יונתן.

סטיבן אנדרסון רשם עוד ב-2012 על חוויית משתמש: “נמאס לי לדון בחוויית משתמש. נמאס לי להגיד מה זה ומה זה לא. נמאס לי לדבר על wireframes נגד prototypes. נמאס לי מדיונים סביב agile-lean-waterfall. אני עייף משיחות על פרסונות ומפות אתר…”. סטיבן ממשיך לציין דברים שאינו אוהב, אך אני בהחלט יכולה להבין למה הוא מתכוון כשהוא רוטן כך.

עיני נחה דווקא על הסעיף בו הוא ציין את Agile-lean.

במידת מה, אני מסכימה איתו. הדיון סביב הנושא מזמן גלש מהמישור העקרוני, ובתוך הקהילה הקטנה ממילא של מעצבי UX מתחילות להתהוות תתי קבוצות, הדוגלות בצורות העבודה ה”מוזרות” הללו.

היות ונשאלתי מספר פעמים בנושא (“איך את אישית עובדת?”, “האם יצא לך לעבוד בצורה X?”, “גישה? מה, יש גישות?!”), החלטתי לרכז עבורכם בפוסט קצר את עיקרי הדברים.

Lean VS Agile

Taken from Pixabay.com

מה זה בעצם Lean UX?

במשפט אחד: מתכננים ומבצעים את כל המוצר בשלמותו מההתחלה, ולאחר מכן מתקנים ומשנים.
המדד: אם זה נוח לשימוש.

Lean היא גישת הפיתוח שנחשבת “מסורתית”. בפועל, מדובר בעיצוב מונחה בדיקות, מדידה והתאמה גם לאחר שהמוצר מושק. עיצוב חוויית משתמש בשיטה זו תדרוש שיתוף פעולה בין מספר גורמים תוך פיקוח “עסקי” מלמעלה (על מנת לוודא שהמוצר עומד ביעדים) וכאן בפועל גם קיימת האופציה של להשיק מוצר מלוטש ולהמשיך לשפר אותו לאורך זמן, על ידי איסוף וקבלת מידע ממשתמשי קצה או קבוצת ביקורת מסויימת.
כאן מושקע זמן רב במחקר שוק, הבנת הצורך, שיחות ודיונים וכן הלאה.
המחקר כאן, למעשה, הוא גולת הכותרת. בגישה זו ככל הנראה מעצב חוויית המשתמש יבלה את חלק הארי של זמנו בחשיבה ולאו דווקא בעיצוב.

Lean UX Design

ומה עם Agile UX?

במשפט אחד: מגישים מוצר מינימלי מתפקד במהירות הגבוהה ביותר שניתן.
המדד: אם זה מתפקד ומישהו היה משלם על זה.

ההבדל בין שתי הגישות ניכר כשמשווים את גישת ה- Lean לחברתה Agile. השם עצמו מרמז על זריזות, וכאן בעצם נעוץ השורש להבנת המונח.
כבר שמעתי דוגמא לפיה Agile UX מושווה להזמנת אוכל מהיר: מדובר בפיתוח שנועד לענות על צורך “בוער”, במהירות שיא. לכן – מהירות היא אכן שם המשחק.
כגישה שהותאמה במקור למפתחים, כאן יש יותר דגש על עבודה בצוות, איטרציות רבות וחשוב מכל – זמני שיא. לכן, במקרים רבים השאיפה היא להשיק את המוצר כמה שיותר מהר, במטרה שהמוצר פשוט יתפקד, ולהמשיך לשפר אותו ללא הרף.
גישה זו, שמקורה בתחילת ימי הסטארטאפים העליזים, טובה מבחינת יכולת להציג תוצר במהירות (לפני שמתחרה יציג, למשל), אך גם עשויה להקשות על אדם שנמדד למעשה ביצירתיות ומחשבה על הפרטים הקטנים.

Agile UX Design

מה יותר טוב?

התנסיתי בשתי הגישות, ואף על פי שאני נוטה להשקיע את הזמן הראוי במחקר והבנה, גם עבודה תוך מתן דגש על מהירות היא מאוד פרודוקטיבית.

אני לא חושבת שניתן ליצור כלל אצבע לפיו ניתן יהיה להתבונן על פרוייקט ולהחליט “או! לכאן מתאים Agile UX” או “גישת ה-Lean פשוט תפורה על הפרוייקט הזה”, זה לא כל כך פשוט. הבחירה תלויה במספר גורמים – מי הם השותפים לפרוייקט, מהו המניע הכלכלי, מהם הדדליינים, מיהו קהל היעד וכן הלאה. כמובן שלהשיק אפליקציה לחובבי טכנולוגיה תאפשר עבודה זריזה ותיקון באגים בהמשך (הם אנשים טכניים, הם יבינו), ואילו משהו שפונה לקהל יעד כללי יותר אמור להיות מעט יותר מלוטש ומחושב.
חשוב לציין כי לעיתים מתקיים שילוב כלשהו של שתי הגישות – נושא שרוב המקצוענים יבחרו להצניע. מה זאת אומרת? למשל – לאפיין במשך חודש, אך את הביצוע עצמו לסיים ב”מרתון” של יומיים. גם זה קורה וכולנו מכירים זאת.

הידע להתנהל בשתי הגישות מעניק כלים נוספים לארסנל. אם אתם טובים במה שאתם עושים ולקוחות/מעסיקים בוחרים לשלם לכם על כך – מה טוב! שלבו את המונחים הללו בלקסיקון שלכם, כך שבמידה ותגיעו לפרוייקט שידרוש מכם את אחד המושגים, תדעו במה מדובר.
גם כמישהי שעבדה בצוותים שפעלו בשתי הדרכים, לא הייתי מגדירה את עצמי כמעצבת בגישה X או Y,  שימו דגש ומחשבה על המשתמש ובעיקר על התועלת הניתנת לו.

ובסופו של דבר

לא משנה באיזו גישה תעבדו – אפילו אף אחת מהן – המשיכו לייצר תוצרים טובים!
שום גישה או מילה מפוצצת אינם תחליף לעבודה איכותית, ובסופו של דבר השאיפה האישית שלי היא לייצר תוצרים שאהיה גאה בהם, גם אם ביצעתי אותם תוך דקות בודדות או חודשים ארוכים, לבד או בצוות.
אם המשתמש לא יאהב את מה שהוא יראה, אין למלחמה בין הגישות שום משמעות.

http://uxi.org.il/pages/18211

OnePlus One 64 GB Sandstone Black invitation giveaway
  • post

Hello, readers! Following my review and its adaptations in various medias, many people have asked me for an invitation.
It’s too hard to choose between the dozens of requests I’ve got, so I’ve decided to leave things to chance!

Please participate in the raffle below, and you could win your own invitation!

Pssst… tweeting can be repeated, so come back daily to improve your chances…

a Rafflecopter giveaway

OnePlus One: סקירה
  • post

http://www.mako.co.il/nexter-cellular/Article-21bf60b93d27841006.htm

OnePlus One review
  • post

My usage of OnePlus One was a rather unexpected one.

I have been a Samsung Galaxy S3 user for quite some time, and up until this point, I still consider it the best smartphone I have ever used, in terms of value, build quality, customization options, flexibility and sensible design.

Owning a great deal of accessories, covers, spare batteries, top-notch screen protectors and more – I haven’t even been thinking about replacing it anytime soon.

It all changed when a co-worker called me up and offered me an invitation to purchase this device, which I have heard of only by proxy. I haven’t been following the latest trends in the cellphone market, so I was sort of unaware to the story of OPO and their vast attempts at marketing to areas outside their home market.

OnePlus One with the box - by Hila Yonatan
OnePlus One with the box – by Hila Yonatan

So, I stopped what I was doing, and began a fast-yet-meticulous research. What is that mysterious device? What does it offer? Most importantly – why should I stop using my all-time favorite smartphone in favor of some new competitor?

I took a night to sleep it over, and when I woke up, a decision has been made – I’m going to use my invitation and buy myself a new gadget. Yay!!!

Following a fast delivery, my OPO has landed, and I’ve had the chance of using it for a short couple of weeks, so I’m glad to review it and offer a summary of my experiences to you.

The raw data

To start things off, I’ve gathered some technical mumbo-jumbo: it’s a 5.5-inch phone, with four cores that are meant to provide a smooth experience. Together with 3 gigabytes of RAM, which is more than desktop computers we’ve been using only a couple of years ago, the phone sure does react well…

The One comes with 64GB of internal storage (in the version I chose), but it offers no further support for memory cards, due to the unopenable nature of the build. This also means that the 3100mAh battery is irreplaceable by simply removing the backplate.

What else?… The camera is a top-notch 13 megapixels sensor, with dual flash and 2160p video recording, which is very very nice.

OPO runs Android 4.4.2, which was upgraded to 4.4.4 since I got it. It is a specific version of CyanogenMod11S, which I’ve used briefly on my S3 and haven’t been a fond of.

It ships with a limited set of pre-installed apps, so it’s clean and free of carrier-specific bloatware. Of course, it has the now-standardized set of sensors: proximity, gyro, NFC and all others you would expect a flagship device to have.

The phone also has no physical buttons, but more grievances about that – later…

OnePlus One backplate - by Hila Yonatan
OnePlus One backplate – by Hila Yonatan

What I liked

Let’s start things off by saying that the OnePlus One is a great device,
and priced at $350, I almost feel like I saved money by buying it.

The specifications are just great, the experience is smooth and lag-free (which I learned to overlook before). It’s fun to use OPO, being fast and reliable, not freezing or pulling off weird behaviours when I need my phone the most.

I really like the big screen. I am a UX designer, so I need to test products out on my smartphone. So, having a big screen really helps when I’m checking website responsiveness, showing off my portfolio or just seeking inspiration. The need to squinch my eyes is obsolete!

Other than that, the CyanogenMod11S approach suits me: the device comes clean of any carrier or branded applications (publicly known as ‘bloatware’) – it gives you the bare minimum you need to run your phone. It doesn’t feel anywhere near as bloated as the S3 felt when I started using it – when it was preloaded with all sorts of carrier junk.

Simplicity and cleverness runs throughout this smartphone – it arrives in a very nice package with the bare necessities: the device itself, a charger and a cable, and a pin to open the SIM card drawer. Whether it’s their ideology, or cutting down manufacturing costs, I really like it. No clutter, no ‘paperwork’… just what you need, which is a philosophy I can relate to!

Also, it has some cool features worth mentioning: rooting is easy and does not void the guarantee, it has a nice theming engine (a feature of CyanogenMod11) which allows me to think that I use Google L one day and LG G3 the next, a fast shutdown/power up feature, good sound options and full support of my existing peripherals.

A worthy mention is the splendid camera app. OPO’s take on the camera-gallery combo is probably inspired by Google’s own photographing app, but it sure adds to it in terms of usability and ease of use. It is, hands down, one of the best photography apps I’ve ever used, includes a variety of built in modes and settings – yet it remains easy to use and entry-level safe. EDIT: I have come to realize that the guys from XDA have extracted it and made the app available on other devices as well. Read all about it here.

OnePlus One in my hand - by Hila Yonatanalt=
OnePlus One – by Hila Yonatan

What I liked… a bit less

Well, you must have thought that this phone is perfect, so, I’m obliged to criticize just a bit, to be fair…

The ‘clean-ness’ is a double-edged sword. I wouldn’t buy this phone for my mom, for example, unless I have the time to tweak and configure and install every app she needs. Some of the aforementioned bloatware is actually suitable for entry-level users, who won’t browse around the Play Store and test out different solutions – but place the device in the hands of a more knowledgeable relative while saying “make it work!”…

Other grudge I have is the fact that the device has no physical buttons, and the ‘home key’ area is a bit too sensitive – so often when reaching out for the space key in my on-screen keyboard, I accidentally press the ‘home’ key area and leave the app mid-word. In comparison, the Galaxy S3 had a physical button, which you have to press specifically in order to reach your homescreen.

I understand that physical buttons are more prone for breaks and replacements – but something should have been done about this over-sensitivity.

Oh, and, being a designer, I didn’t like the default look of the device, which is solved easily by changing a theme. The CyaogenMod team should have asked for my professional opinion…

Also, a potential buyer should really think if the size is suitable. Clocking at 5.5 inch, the OnePlus One is likely to stick out of your back pocket…
To top that, I am still used to a smaller phone – so I had to adjust myself to talking ‘the correct way’ – the speaker is located in the middle of the device, and the way I hold it, I wasn’t able to hear the person I’m speaking with very clearly. I still find myself re-adjusting the location of the phone while talking, so the speaker is properly aligned with my ear – something I haven’t had to worry about with smaller phones.

Another thing that popped into mind after several days of use is the size of the notification LED. Don’t raise your eyebrow just yet, let me explain.

In my Galaxy S3 I have come to rely on the LED, and I have used specific apps to customize the duration, the pattern and even the color of the blinks. There – the LED was big, as big as the light sensor, so I could look into my room and see the LED right from the doorstep. OPO’s LED is tiny. Pinhead-tiny. I have to pick up the phone to actually see what color it blinks this very moment. This is a bummer of sorts, as this is not evident immediately and it’s something so minor, that I wouldn’t even call it a grievance – but still, it could be slightly bigger and slightly more useful.

OnePlus One - by Hila Yonatan
Afternoon at home with my OPO – by Hila Yonatan

To sum things up…

I really do love this phone! It feels good, it’s flexible and powerful and I’ll recommend it wholeheartedly to anyone who is thinking of upgrading their smartphone without overpaying.

There are still few things that could be worked out, but I think that it’s mostly software-based, so OnePlus could fix those things in the future! I give it… 9.4 out of 10.

Hila Yonatan

A fix for Google Fonts not displaying correctly
  • post

Just a simple tip I wanted to share with you from my experience, which I hope might help you,
and will not cause you the same headache it did to me 🙂

While working on my website, I have realized that on one of my home PCs,
the fonts were not the same as I’ve decided them to be.

To elaborate some more, I have chosen a specific webfont from Google Fonts to use in my website,
and while testing it from other PCs I have realized that on some configurations –
the default font was showing (and not my chosen webfont).

So, I have started researching.

The problem

It appears that some configurations are having trouble with using fonts that are “drawn” from other domains.

Meaning – fonts that are being hosted somewhere else other than the site, Google for that matter,
are blocked for security purposes.

The solution

For me, the thing that solved it was adding few lines to the bottom of the website’s “.htaccess” file.
Usually this file would be located in the site’s root directory, public_html or something similar.

htaccess file
The lines are:

<FilesMatch ".(ttf|ttc|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

You’ll probably need FTP access to your site in order to make the required change.

The meaning of those lines is something that is called “cross-domain linking”,
which allows the website to use fonts that are hosted on other domains.

You can see that the file types are limited to common font file extensions (ttf, ttc, otf, eot and woff) and not other
kinds of files – so it appears that the procedure is safe.

Just make sure that you backup the contents of your current “.htaccess” file before changing,
in case something goes sideways 🙂

Hila Yonatan

15 טיפים קטנים ל-UI מוצלח
  • post

אני רואה שאלות רבות שעולות כשאני מעצבת ממשק משתמש, או כשמדברים איתי על זה. האמת היא, שאין נוסחה – ממשק משתמש מצויין הוא פונקציה של גורמים רבים: ידע והבנה של השוק, השראה, יכולות טכניות, מעט כישרון מולד אבל בעיקר יכולת ההזדהות עם המשתמש (וחשוב מזה – כל משתמש).
בכל זאת, ניסיתי לנסח מספר עקרונות שמנחים אותי אישית בתהליך בניית ממשק משתמש מוצלח. אלו גורמים שבאים לידי ביטוי במידה כזו או אחרת בכל פרוייקט שהוא, כך שאני מבצעת את הדברים הללו מתוך רפלקס. ההצעה שלי היא לנסות לאמץ מה שנכון לכם מהטיפים – לראות איך זה משתלב בתהליכי העבודה שלכם – ולאמץ מה שמרגיש לכם נכון.

גישה פשוטה למה שחשוב

היזכרו בפייסבוק. האלמנטים החשובים בממשק תמיד נמצאים במרחק לחיצה אחת מכם.
כנ”ל בממשקי Windows – לרוב תמצאו תפריט קבוע שמאפשר למשתמש להגיע בקליקים בודדים למקום החשוב ביותר במערכת.
אמצו גישה זו – הוסיפו קיצורי דרך.

לא לאמץ את המשתמש

גולשים היום ממהרים, ולא חסר מידע ברשת.
ספקו מעט מידע, בצורה נגישה, כשהשליטה בפוקוס שלהם נמצאת בידיכם. מה שניתן לא להציג – שלא יוצג. מה שאפשר לקצר – קצרו.
אם המסר לא עובר במשפט אחד – נסחו מחדש!

עשה ואל תעשה

צמצמו את כמות הרעש

בכל פריט שהוא, יש את מה שחשוב, ויש “רעשי רקע”.
צמצמו את כמות רעשי הרקע למינימום – השאירו ב”פריים” רק את מה שחשוב באמת, ומה שניתן לוותר עליו, שיישמר לגולש שמתעניין בזה באמת.

השליכו לפח אלמנטים שאינם דרושים

יש טכניקות שונות שמלמדות אתכם לזהות מה נדרש ומה לא. קראו על עקרונות של רדוקציוניזם בעיצוב, ספקו פרוסות קטנות של מידע עם כל שלב, התעלמו מאלמנטים שאינם זוכים למספיק פוקוס, וכן הלאה.

נצלו לטובתכם כלים מתקדמים

השוק רווי בפתרונות ומנגנונים שיכולים רק להקל על המשתמש שלכם. השתמשו בהם. לדוגמא: אפשרו הרשמה באמצעות פייסבוק/טוויטר/גוגל, הציעו כפתור פייפאל לתשלום, כפתורי שיתוף “חכמים” שיודעים להפנות לאפליקציה המתאימה בסלולר ועוד.
הפתרונות הללו רק דורשים החלטה – והמשתמש שלכם חסך כמה שניות וכמה שלבים – הוא יודה לכם על זה. מדובר בכלים ידועים, מאובטחים והמשתמשים מרגישים איתם בנוח. בנוסף, זו בריכת מידע שכבר לא ניתן לשלוט עליה – עדיף כבר לנצל אותה לטובה.

ההתחברות לסטאמבלאפון

שמרו על פשטות

אם ניתן לחסוך בכותרת המתארת את תוכן השדה בטופס, ובמקומו להשתמש ב-placeholder, זוהי דוגמא נהדרת למצב בו עבודה נכונה חוסכת קצת שטח מבוזבז, ומקילה על המשתמש.
לרוב – הפתרון הכי טוב לסיטואציה יהיה בהכרח הפתרון הפשוט ביותר, עבור משתמש הקצה במוצר שלכם.

השתמשו באלמנטים מוכרים

יש מגוון רחב של כלים שהמשתמש יודע לזהות אינטואיטיבית. ריבוע עם האות f יזוהה כבר עם פייסבוק, ולא קיים משתמש אחד שלא יבין מה עושים עם תיבת סימון או שדה טקסט. אנו חיים בעידן האינטרנט, השתמשו במה שהמשתמשים שלכם כבר -למדו- להכיר.

500px-in

בלי ניחושים

במידה ודרוש הסבר כלשהו לפעולה אותה מצופה מהמשתמש לבצע, ישנם סיגנלים שניתן להעביר אליו שיגרמו לו להבין, באמצעות מוסכמות קיימות, מה מצופה ממנו. למשל – שימוש באייקון של מעטפה לרוב יוביל לביצוע פעולה כלשהי שקשורה לתקשורת כתובה (מייל, סמס), בעוד שסימן שאלה הוא סמל מקובל לעזרה.
שימוש בחיוויים, הסברים נעימים לעין, טקסטים קצרים אפילו – יקלו על השימוש במערכת שלכם.

500px

הדריכו את המשתמש

צאו מנקודת הנחה שהמשתמש לא רוצה לחשוב יותר מדי.
פרקו תהליכים מסובכים לחלקים קטנים ופשוטים, פשטו פעולות מסובכות – במידה והן הכרחיות – וזכרו שמשתמש מותש הוא משתמש מאוכזב – ומזה צריך להימנע בכל מחיר.

מסך התחברות

השקיעו בתוכן!

אנשי השיווק תמיד אומרים שהתוכן הוא המלך. זה נכון גם עבור ממשקים. התוכן שאתם מכניסים, השפה בה אתם משתמשים כדי לתאר דברים, יכולה לגרום לחיוך באותה קלות כמו שהיא יכולה לגרום לתסכול.
בחרו את המילים בקפידה, ואף השתמשו באיש מקצוע לצורך זה.

שמירה על אחידות

השתמשו בכמות מצומצמת של אלמנטים “מיוחדים”, במיוחד במערכות גדולות.
גופן יחיד – גדלים אחידים – סגנונות דומים – כפתורים זהים לאותן פעולות – ניווט אחיד.
שמירה על חוקיות בעיצוב הממשק שלכם תדאג שהגולש לא “יסתבך” ויצטרך למצוא את דרכו מחדש בכל פעם.

ארכיטקטורה נכונה

דאגו שהמערכת שלכם, עבור כל פעולה, לא תכיל יותר משבעה אלמנטים. למה הכוונה? אם יש לכם טופס – לא יותר מ:2-5 שדות אפשריים.
אל תתגרו בריכוז של המשתמשים שלכם, ואל תדרשו מהם לזכור או לקחת בחשבון יותר מדי פרמטרים.

התחברות לטאמבלר

הדגישו את הצעד הבא

במידה ומדובר בתהליכים, שימוש בעיצוב נכון יכול להוביל את המשתמש למעוז חפצכם, כמעצבי הממשק. הדריכו את המשתמש דרך צבע, גופן, קריאה וסידור התכנים מה אתם מבקשים ממנו לבצע, וכך תגבירו את הסיכוי שהוא אכן יבצע זאת.

זרימה

אל תמציאו גלגלים מחדש

טיפ מעט בעייתי – כי מצד אחד קיים הרצון לייצר ייחוד כלשהו, ומצד שני – אתם מעוניינים לדאוג שהגולש לא יסתבך, כמו שהמלצתי קודם.
אז מה עושים?
שומרים על מידתיות. שנו כל פעם קצת והשתמשו בכלי מדידה כדי לבחון את השינוי. בצעו A/B testing עבור הרעיונות שלכם ודאגו לכך שגם אם רעיון פחות הצליח – תהיה דרך לחזור.

כיף!

כשמגיעים למקום שלא רוצים להגיע אליו / לא אמורים להגיע אליו, פעולה שלא תוכננה כראוי (דוגמאות טובות הם עמודי 404 באתרים והודעות שגיאה באפליקציות)  – שמרו על עניין!
תגובה מצחיקה, מעוררת מחשבת, מושכת ומאתגרת תגרום למשתמש לא לנטוש את המערכת ולא “להתבאס” אפילו.
במקרה הגרוע ביותר – להישאר בעמוד עוד קצת, כאשר המטרה היא לשמור על רושם טוב ולייצר חוויה נעימה, גם בסיטואציות של חוסר מענה.

עמוד 404

לסיכום…

אני מאמינה שרוב הסעיפים כאן הם קודם כל – הגיוניים. אתם יכולים להשתמש בזה כסוג של צ’קליסט לעבודת עיצוב הממשק שלכם, ולראות אם אתם מצליחים לייעל במעט את המוצר אותו אתם בונים.
הטיפ החשוב ביותר ככל הנראה הוא – החזיקו את המשתמש במרכז. גם כשאתם מעצבים עבור לקוח, וגם אם מדובר בעבודה חשובה שתרצו להציג בפורטפוליו שלכם – אל תיכנעו לגחמות ואל תתפרעו. ההצלחה של המוצר תימדד לא לפי תיק העבודות היפה שלכם ולא לפי שביעות רצון הלקוח – אלא לפי משתמש הקצה, האדם מן השורה שמוצא את עצמו מתמודד עם המערכת שבניתם.
אם כך – נסו להקל עליו, עד כמה שניתן!

יש לכם טיפים נוספים? אשמח מאוד אם תשאירו תגובה ותשתפו אותי, אשמח לערוך ולהוסיף את הטיפים שלכם ואף לתת לכם קרדיט 🙂

הילה יונתן.

לא אכחיש, אני אוהבת מאוד דברים שנראים טוב, כשרואים שהושקעה מחשבה באסתטיקה שלהם.

העניין הוא – אני רואה שרבים מחבריי והאנשים בסביבתי הקרובה פשוט מזניחים את הסלולרי שלהם, שנמצא בידיהם רוב שעות היום, ודווקא אחד המכשירים הכי גמישים לעיצוב וסידור נשאר משעמם וזהה למה שהוא היה כשהוצא לראשונה מהקופסא.

מפתחים חרוצים יצרו מאות ואלפי שיטות שונות להתאים אישית את המראה של הסלולרי – יחד עם דרכים מעניינות במיוחד להתאים אישית את מראה הטלפון. לא, אני לא מתכוונת לרקע בלבד – אלא שינוי גורף (ולעיתים – גדול) לצורת העבודה עם המכשיר.

מטבע הדברים, מכשירי אנדרואיד גמישים יותר לשינויים כאלו ממכשירי iOS, לכן אמליץ על אפליקציות רלוונטיות למשתמשי הרובוט הירוק. חובבי התפוחים – עמכם הסליחה 🙂

ממה נתחיל?…

שלב ראשון: להחליף לאנצ’ר

לאנצ’ר, למי שלא מכיר, הוא חוויית השימוש הבסיסית במכשיר. מכשירי סמסונג כוללים בילט-אין לאנצ’ר בשם TouchWiz ואלו המשתמשים ב-HTC נהנים (או לא נהנים, עניין של פרספקטיבה) ממשהו שנקרא Sense.
בעלי מכשירים המריצים אנדרואיד נקי, סביר להניח שישתמשו ב-Google Now.

זהו ה”ווינדוס” של המכשיר, מה שמפעיל דברים, ממשק המשתמש (ה-UI) הבסיסי שלכם.

החלפת לאנצ’ר היא לא רק שינוי קוסמטי, היא שינוי תפיסה. יש לאנצ’רים שישנו את צורת העבודה שאתם רגילים אליה (לדוגמא TSF Shell, שלהסתגל אליו דורש צפיה בסרטוני יוטיוב כדי להבין, אבל מביני הדבר אומרים שזה שווה את זה) ויש כאלה שמהווים שינוי פחות רדיקלי.

אני משתמשת ב- Go Launcher EX, לאנצ’ר חינמי חביב למדי, שהמיוחד בו שניתן להוריד עבורו מאות ערכות נושא שונות שיכניסו חיים חדשים ומראה חדש למכשיר שלכם. אחיו הגדול והיקר יותר, Next Launcher, לוקח את אותה הנוסחה ומוסיף לה מעברי מסכים תלת מימדיים – חביב, למי שאוהב את זה.

הנחמד ב-Go הוא זה שניתן להחליף אייקונים, לסדר בתיקיות, לשלוט מעט יותר טוב בחוויית המכשיר – ועל הדרך, להפוך אותו ליפהייפה.

אגב, היות ורק לאנצ’ר אחד פעיל בכל זמן – זה לא אמור להכביד על המכשיר כלל!

שלב שני: אפליקציות חלופיות

לא רק לאנצ’ר אפשר להחליף. כל אפליקציה שהיא כמעט, שמגיעה עם המכשיר, ניתנת להחלפה באחת יפה יותר!

לדוגמא, החברים מ-Go מציעים תחלופות לאפליקציית ה-SMS, וידג’טים למזג אוויר ושעה ואף מסך נעילה חלופי מונפש – כל תחלופה כזאת מגיעה עם עשרות וריאציות של ערכות נושא שניתן לבחור מתוכם את היפה ביותר בעיניכם.

גם אפליקציות כמו שעון מעורר, למשל, לא חייבות להיות משעממות! חברת doubleTwist שמציעה לרוב מוצרים מעוצבים ויפים, מציעה אפליקציית שעון מעורר – שהופכת גם את הנושא הזה למעט יותר יפה.

מה עוד יש? כמעט הכל!

לוח שנה עם ממשק משתמש מדהים… (אגב, מוצר ישראלי)

חלופה לג’ימייל מבית דרופבוקס…

ועוד ועוד ועוד… 🙂

שלב שלישי: רום חלופי

כאן אנחנו נכנסים לדברים מעט יותר מסובכים, ולכן לא אמליץ על זה למי שלא ממש מבין איך עובד הטלפון שלו.

רום הוא בעצם מערכת ההפעלה כולה. להתקין רום לא מומלצת למשתמשים חדשים, אבל היה לי חשוב לציין שגם זאת אופציה שקיימת וניתן להשתמש בה.

הרעיון הכללי הוא שרום יכול להיות מעוצב בצורה מדהימה, על ידי היוצר שלו. חלק מהרומים עוברים עיצוב ייחודי, מנסים לחקות מנגנונים אחרים, ולכן שימוש ברום חלופי יכול לשנות את מראה פריטים בטלפון שלא ידעתם שניתנים לעיצוב. לדוגמא:

הנה דוגמא שמראה איך אפשר לגרום לגלקסי S3 להיראות כמו S5!

סנסיישן רום

למקרה שתהיתם, זה הרום.

אחרים, לוקחים את זה לכיוון אחר לחלוטין:

קולור רום

זה הרום, להנאתכם.

אלו רק שתי דוגמאות, אבל הן ממחישות יפה מאוד מה אפשר להשיג עם קצת מאמץ…

שלב רביעי: פריימוורק

גם זה שלב לקוראים המתקדמים יותר.

מה זה פריימוורק בעצם? כדי לא להיכנס להסבר טכני מדי, אסביר מה זה יכול לעשות.

בהתקנת קובץ פשוט שמבצע שינוי קל בקבצי המערכת שלכם (Xposed, מומלץ לקרוא הוראות שימוש)
ניתן להתקין אפליקציות ששולטות על כמעט כל פרמטר ברום שלכם!

למשל Wanam Xposed מאפשר לי (ולכם!) לערוך את הצבעים של השעון בשורת ההתראות,
איזה כפתורים יופיעו במתגים, להפוך את הוילון כולו לשקוף, ועוד ועוד.

וונאם

אפליקציה נוספת שעושה דברים דומים היא Gravity Box, מוזמנים לנסות!

שלב חמישי – בונוס: אנימציית פתיחה

כן, נכון, זה לא שימושי בכלל, אבל זה נחמד בכל מקרה!

האנימציות הקטנות שמופיעות כשמפעילים את האנדרואיד שלכם ניתנות לשינוי גם כן.

לי יש Galaxy S3, ועבורו ראיתי כמה אנימציות יפות כאן ובעיקר כאן – רצוי לבדוק אם האנימציה אכן מתאימה לגרסה שלכם ולקרוא הוראות ספציפיות למכשיר!

מאד אשמח לשמוע מכם גם!

יש לכם טיפ מעניין? משהו שווה  שעשיתם ומשפר את ניראות המכשיר שלכם? שתפו אותי!
ספרו לי בתגובות למטה, אפשר להעלות תצלום מסך גם!
– ואשמח לפרסם כאן דוגמאות לאיך שהמכשיר האישי שלכם נראה.

הילה יונתן.

כמעצבת חוויית משתמש, כבר תקופה ארוכה שאני עוקבת אחרי האפליקציה Sunrise – אפליקציית לוח שנה מקסימה שעד עכשיו נהנו ממנה רק חבריי בעלי האייפונים. אהבתי את הממשק הנקי, העיצוב ה-streamlined ואת פשטות השימוש, מה שהפך את ההמתנה והציפייה להתחיל להשתמש בה לקצת קשה…לפני מעט יותר משבוע הושקה האפליקציה הנחשקת בגרסת האנדרואיד שלה, וחיש-מהר הטענתי אותה בגלקסי האהוב שלי לסיבוב ניסיון. אחרי כמה ימי שימוש – אני שמחה לחזור עם רשמים.

Screenshot_2014-06-09-16-14-25

מה מיוחד ב-Sunrise?

זה לא סוד שיש אפליקציות רבות שמנהלות לו”ז. חלקן, דוגמת Cal הישראלית אף מתגאות בממשק משתמש מהודר,
אך Sunrise כבשה את עיני מהרגע הראשון שראיתי את חבריי חובבי התפוחים עוברים להשתמש בה בלעדית.

מעבר למה שאפליקציות אחרות יודעות לבצע, Sunrise תתחבר עבורכם לחשבונות רבים ממיטב פלטפורמות:
גוגל כמובן, פייסבוק, לינקדאין, טוויטר, פורסקוור, איי-קלאוד של אפל, פרודוקטיב ואחרות.

לאחר החיבור הראשוני, האפליקציה תציג לכם שמש (כמובן!) ותטען תוך רגעים ספורים את כל האירועים שלכם לתוך לוח השנה.
במקביל, כל האירועים יעלו לאתר של Sunrise (בכתובת sunrise.am) ויאפשרו לכם לעבוד בממשק מבוסס דפדפן נוח ומרהיב ביופיו.

בניגוד לאפליקציות לוח שנה אחרות, Sunrise כולל גם ווידג’ט (יישומון – ידעתם שקוראים לזה ככה?…)
שניתן להציב על שולחן העבודה של מכשירכם, ולקבל גישה לאג’נדה שלכם בכל רגע נתון (רשימה מסודרת של כל האירועים והמשימות).

Sunrise Screenshot 1Sunrise Screenshot 2

למה אהבתי את Sunrise?

קודם כל – הפיצ’רים!

Sunrise כוללת כמה פיצ’רים חכמים מאוד: החיבור לפייסבוק, למשל, מציג אירועים וימי הולדת כבר בתוך לוח השנה שלכם, כדי שלא תשכחו כלום. עבור כל יום – מוצג מזג האוויר. גרסת הדפדפן הופכת את האפליקציה לכלי עבודה משרדי של ממש, פיצ’ר שלא ראיתי בשום אלטרנטיבה עד כה. גם הווידג’ט מרשים ושימושי במיוחד – ברגע שמתחילים להשתמש בו, קשה להבין איך אפשר לחזור לעבוד בלי…

כיוון שאני קודם כל מעצבת חוויית משתמש, אני לא יכולה להימנע מלבחון את האפליקציה דרך משקפיים כאלה.

חוויית המשתמש (ה-UX) כאן היא מהטובות שראיתי, וניכרת חשיבה על כל הפרטים הקטנים שהופכים משימה כמו בניית לו”ז לפעולה קלילה וכיפית. כל מסך – מהמסך החודשי שמוכר לכולם ועד לתצוגה החדשנית של שבועיים לצד אג’נדה – נראה מעולה וברור.

אפילו הנושאים הזעירים-לכאורה כמו הגלילה, כפתור החזרה למעלה והסמלילים בהם היוצרים השתמשו – הכל נוח, נעים למראה וברור. עכשיו אני יודעת במבט חטוף – מה הולך להיות מזג האוויר בכל שעות היום, איזו מטלה עליי להשלים ומתי – אני לא “סובלת” מעודף מידע, כפי שאפליקציות לוח שנה מציגות לרוב.

גם המעברים הנעימים שיש באפליקציית הדפדפן (זוכרים שדיברתי על זה?) מראים הבנה עמוקה של UI טוב.

Sunrise Screenshot 3

למה אתם מחכים?!

אם עדיין לא השתכנעתם, נסו!

התקינו את Sunrise כבר תבינו למה אני ממליצה על זה…

בעלי אנדרואיד, כמוני, פנו לקישור הזה, דרכו תוכלו להוריד את האפליקציה מחנות האפליקציות.
אם אתם חובבי iOS דווקא, אז הקישור הזה יתן לכם את המענה. לגרסת הדפדפן מגיעים מכאן.

בכל מקרה, לאחר ההורדה, תידרשו להתחבר לחשבונות שלכם.
אני ממליצה לחבר לחשבון הגוגל לכל הפחות – ופייסבוק גם מומלץ – ואז להתחיל להקל על החיים! 🙂

תהנו, וספרו לי מה אהבתם ב- Sunrise שגרם לכם, כמוני, לנטוש את האפליקציה הרגילה…

תצלומי המסך לקוחים מתוך עמוד האפליקציה הרשמי.