تصاویر از مهمترین عناصر در طراحی تجربه کاربری (UX Design) هستند. آنها میتوانند یک طراحی را موفق کنند یا آن را تضعیف نمایند؛ زیرا یا محتوا و فراخوان به اقدام (Call to Action) را تقویت میکنند یا باعث انحراف توجه و سردرگمی کاربر میشوند.
تصاویر زمانی که بهدرستی استفاده شوند به کاربران کمک میکنند محتوا را بهتر درک کنند؛ زیرا با ارائه زمینه (Context) و تقویت ایدههای کلیدی، فهم مطالب را آسانتر میسازند. درک انواع مختلف تصاویر و کارکردهای آنها به طراحان کمک میکند این داراییهای بصری (Visual Assets) را بهطور مؤثر در طراحیهای خود به کار ببرند.
عکس ها
عکسها در طراحی نقشی اساسی دارند، زیرا با افزودن بُعدی بصری به طرح، توجه کاربران را جلب کرده و فهم مطلب را بهبود میبخشند. عملکردهای عکسها شامل موارد زیر است:
- توضیح ایدهها: عکسها میتوانند مفاهیم پیچیده را سادهتر کنند. به عنوان مثال، تصویری از یک محصول در سایت فروشگاه آنلاین، کمک میکند تا کاربران تصویر بهتری از آنچه میخرند به دست آورند.
- ایجاد ارتباط احساسی: عکسهای با کیفیت بالا که دارای جزئیات انسانی هستند میتوانند احساسات را برانگیزند و در برندینگ موثر باشند؛ مانند تصویری از یک مسافر در مناظر زیبای یک وبسایت گردشگری که حس سفر را در مخاطب بیدار میکند.
- افزایش تعامل کاربران: تصاویر جذاب کاربران را بیشتر در صفحه نگه میدارند. مثلاً سایتهای خبری از عکسها برای تکمیل داستانهای خبری استفاده میکنند و تجربه خواندن را غنیتر میسازند.
در کل، عکسها به عنوان کاتالیزوری بصری در طراحی عمل کرده و ایدههای انتزاعی را به تصاویر قابل فهم تبدیل میکنند و تعامل کاربران را بهبود میبخشند.
تصویرسازی
ایلاستریشن (Illustration) نوعی تصویرسازی است که توسط یک هنرمند ایجاد میشود. این تصویر میتواند به شکل طراحی، نقاشی، کلاژ، حکاکی یا تصویر نمادین باشد و به انتقال یک پیام بصری کمک کند.
از جمله کارکردهای ایلاستریشن میتوان به موارد زیر اشاره کرد:
- برانگیختن احساسات مثبت
- ایجاد حس نوستالژیک
- زنده کردن محتوایی که خشک یا متراکم است
- تقویت یا شکلدهی به هویت برند در محصول
- توضیح دادن درباره ماهیت یا عملکرد محصول
- بهطور کلی لذتبخشتر کردن تجربه کاربری (UX)
تصاویر جایگزین موقت (Image Placeholder)
تصاویر جایگزین موقت (Image Placeholder) تصویری موقت یا آزمایشی است که برای نشان دادن جایگاه یک تصویر واقعی استفاده میشود. رایجترین نوع آن پسزمینهای خاکستری با آیکونهای کوه و خورشید است. همچنین میتوان نسخههای اختصاصی از پلیسهولدرها را متناسب با هویت برند طراحی کرد.
پلیسهولدرهای تصویر زمانی در طراحی وب و اپلیکیشن استفاده میشوند که تصاویر نهایی هنوز در دسترس نیستند. برای مثال، آنها در وایرفریمها (Wireframes) یا ماکاپها و پروتوتایپهای اولیه دیده میشوند. کاربرد دیگر آنها در اسکلتون لودرها (Skeleton Loaders) است، جایی که فضای تصویر را تا زمان بارگذاری محتوای صفحه حفظ میکنند.
نکته حرفهای: در وایرفریمها یا پروتوتایپها از پلیسهولدرهایی استفاده کنید که با موضوع پروژه همخوانی داشته باشند. این کار به افراد کمک میکند محصول نهایی را بهتر تصور کنند.
تصویر هیرو (Hero Image)
تصویر هیرو معمولاً یک تصویر بزرگ و جذاب در بالای وبسایت است که میتواند شامل عکس، ویدیو یا GIF باشد. این تصاویر قدرت زیادی در جلب توجه کاربران دارند و آنها را تشویق میکنند که بیشتر سایت را کاوش کنند. انتخاب این تصاویر باید با دقت انجام شود، زیرا باید پیام کلی سایت را تقویت کرده و نقش کلیدی در تعامل با مخاطب داشته باشند.
نکته حرفهای! از عکس یا ویدیوی با کیفیت بالا برای ایجاد تأثیر اولیه قوی استفاده کنید
تصویر بندانگشتی (Thumbnail Image)
تصاویر بندانگشتی (Thumbnails) نسخههای کوچک و تعاملی از تصاویر هستند. یک Thumbnail میتواند نماینده یک تصویر کامل یا یک فریم ثابت از یک ویدئو باشد. با کلیک روی آن ممکن است صفحه جدیدی باز شود، تصویر در اندازه کامل داخل لایتباکس (Lightbox) نمایش داده شود، یا به شکل دیگری تصویر انتخابشده نمایش داده شود.
Thumbnailها معمولاً به دو دلیل استفاده میشوند:
- کمک به کاربران برای اسکن سریع محتوا
- کاهش زمان بارگذاری صفحه
برای کاهش حجم دادهای که سرور باید بارگذاری کند، بهتر است بهجای کوچکسازی تصاویر کامل، داراییهای جداگانهای برای Thumbnailها ایجاد شود.
لایتباکس (Lightbox)
لایتباکس (Lightbox) با کلیک کاربر باز میشود، کل صفحه را با یک لایه پوششی (Overlay) میپوشاند و تصویر را در اندازه بزرگتر نمایش میدهد. این مکانیزم تا حدی شبیه پروژکتور عمل میکند و به کاربران اجازه میدهد تصویر را بدون حواسپرتی مشاهده کنند.
اگر چندین تصویر بهصورت دنبالهدار وجود داشته باشد، باید نوعی نشانه بصری برای پیمایش تصاویر در نظر گرفته شود. این نشانه میتواند شامل فلشهایی در دو طرف تصویر یا مجموعهای از نقطهها یا اعداد در پایین تصویر باشد.
تصویر پروفایل (Profile Picture)
تصویر پروفایل (Profile Picture) یک عنصر بصری مهم است که کاربران را در پلتفرمهای آنلاین مختلف مانند شبکههای اجتماعی، انجمنها و شبکههای حرفهای نمایندگی میکند. این تصویر معمولاً در کنار نام حساب کاربری یا در پستها و دیدگاهها نمایش داده میشود و اغلب یک عکس شخصی است که روی چهره کاربر تمرکز دارد.
استفاده از شکل دایرهای برای تصویر پروفایل بسیار رایج و هوشمندانه است، زیرا صورت را بهصورت طبیعی قاب میکند و ویژگیهای مهم چهره را برجسته میسازد. این طراحی ساده اما مؤثر باعث افزایش قابلیت تشخیص افراد شده و به تعاملات آنلاین جنبهای شخصی میبخشد.
از طریق تصاویر پروفایل، کاربران میتوانند هویت و فردیت خود را بیان کنند و تجربه دیجیتال انسانیتر و جذابتری ایجاد نمایند.
آواتار (Avatar)
بهطور کلی، آواتار (Avatar) شیئی است که هویت کاربر را روی صفحه نمایش نمایندگی میکند. برای مثال، تصویر پروفایل نوعی آواتار محسوب میشود. در معنای محدودتر، آواتارها پلیسهولدرهای تصویر پروفایل هستند که قبل از اضافه شدن عکس واقعی توسط کاربر نمایش داده میشوند. آنها همچنین به کاربران کمک میکنند محتوای رشتههای دیدگاه (Comment Threads) را سریعتر اسکن کنند، زیرا در کنار نام کاربر قرار میگیرند یا گاهی جایگزین آن میشوند.
آواتارها معمولاً شامل آیکون پروفایل، حروف اول نام کاربر یا Identicon روی یک پسزمینه رنگی هستند. برخی شرکتها آواتارهای سفارشی طراحی میکنند که به شکل ایلاستریشن، حیوانات، ایموجیها یا عناصر برند هستند.
نکته حرفهای: اگر در انتخاب نوع آواتار تردید دارید، گزینهای را انتخاب کنید که بیشترین همخوانی را با هویت برند شما داشته باشد.
آیکونها (Icons)
آیکونها نمادهای بصری هستند که در رابطهای دیجیتال یافت میشوند و کاربران را در انجام وظایف و استفاده از قابلیتهای مختلف راهنمایی میکنند. با نمایش ایدهها، اشیا یا اقدامات بهصورت ساده و شهودی، آیکونها فاصله میان طراحی و کاربردپذیری را کاهش میدهند.
آنها بهعنوان نشانههایی در معماری اطلاعات (Information Architecture) رابط عمل میکنند و کاربران را بهطور طبیعی به مقصد مورد نظرشان هدایت میکنند.
مؤثرترین آیکونها آنهایی هستند که فوراً قابل تشخیص باشند و با مفهومی که نمایندگی میکنند هماهنگی داشته باشند. چه برای کمک به ناوبری، چه برای برجستهسازی فراخوان به اقدام، یا سادهسازی دستورالعملهای پیچیده، آیکونها به ایجاد تجربه کاربری روانتر و جذابتر کمک میکنند. طراحی دقیق آنها نقش مهمی در افزایش کاربردپذیری و جذابیت بصری محصولات دیجیتال دارد.
ایموجیها (Emojis)
ایموجیها (Emojis) تصاویر کوچک و بیانگری هستند که در ارتباطات دیجیتال برای انتقال احساسات، ایدهها و مفاهیم استفاده میشوند. واژه «Emoji» از زبان ژاپنی و به معنای «تصویرنگار» (Pictograph) گرفته شده است و ارتباطی با واژه انگلیسی «Emotion» ندارد. از زمان پیدایش آنها در سال ۱۹۹۷، ایموجیها به بخش مهمی از زبان دیجیتال مدرن تبدیل شدهاند و در سالهای اخیر به محبوبیت گستردهای رسیدهاند.
ایموجیها مجموعه بسیار متنوعی از نمادها را شامل میشوند؛ از حالات چهره گرفته تا غذاها، حیوانات، اشیا، مکانها و نمادهای آبوهوا. ماهیت انعطافپذیر آنها باعث میشود حس غیررسمی و صمیمانهای به طراحی تجربه کاربری اضافه شود و ارتباط شخصیتری با کاربران ایجاد گردد.
با انسانیتر کردن تعاملات دیجیتال، ایموجیها تعامل کاربران را افزایش داده و تجربه کاربری را لذتبخشتر و تعاملیتر میکنند.
