עיצוב אפליקציות

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

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

מ-Figma למסך: איך אנחנו עובדים

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

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

אנחנו גם בונים את מה שעיצבנו

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

ReelsKills היא אפליקציית וידאו אנכית מלאת-מסך בסגנון TikTok לשחקני CS2: פיד קליפים עם ניגון אוטומטי, שכבת killfeed, מעטפת פעולות של לייק, שמירה ותגובות, מסכי פרופיל והגדרות והתחברות דרך Steam בתוך האפליקציה, עם תמיכה מלאה בעברית ובאנגלית. Wazza היא אפליקציית ניהול לפלטפורמת וואטסאפ עסקי: תיבת הודעות משותפת שמתעדכנת בזמן אמת, מעבר חלק בין מענה של בוט למענה אנושי בתוך אותה שיחה, עורך תרחישים ויזואלי שמאפשר לבנות צ'אטבוט ולפרסם אותו מהמסך הקטן, רשימות תפוצה ומסכי אנליטיקות - הכול בעברית מלאה עם פריסת RTL.

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

מוצר חדש או אפליקציה שכבר קיימת

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

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

גם אפליקציות WEB, לא רק חנויות האפליקציות

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

כמה זמן זה לוקח ומה קובע את היקף העבודה

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

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

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

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

יש לכם רעיון או מוצר קיים שצריך עיצוב?

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