LINUX.ORG.RU

Практические советы по улучшению UI моей демо-проги?

 , , ,


0

1

Сделал я тут простенькую программку на Qt/C++ по учету своего времени, типа тайм-трекер. Функционал пока еще в процессе, но суть не про это.

Думаю запихнуть ее как демку в портфолио, и вопрос, как лучше делать UI, что в нем можно или нужно поменять, и т.д.

https://drive.google.com/file/d/1O3MHCYu8SteUq-tcG_mZLZoiRb3dNJNh/view?usp=sh...

https://drive.google.com/file/d/12ktpEeRGEu43fp5YzOybAig5zMGPOaVP/view?usp=sh...

Как-то деревянно оно смотрится, а что и как поменять не понятно.

В общем любые практические советы по вопросу UI, желательно подкрепленные указанием как это сделать на Qt/C++.

(если кому интересно, позже исходники будут опен-соурс).

UPD:Текущий подправленный вариант UI:
https://drive.google.com/file/d/10Y76vEGZ0qKd8xotISaWAe1u3P6aTr46/view?usp=sh...
(зеленные строки демонстрируют режим трекинга по одновременно двум проектам)



Последнее исправление: victor79 (всего исправлений: 5)

Даже если надо список всех пользователей выводить, то можно эдит и делит в конце строки с именем поместить, адд в виде плюса снизу в таблице, ну и кнопку старт побольше, с таймером что пошло-поехало.

redwagon
()
Ответ на: комментарий от victor79

Еще верхняя строка со словом MENU выглядит лишней.

redwagon
()

Функционал пока еще в процессе, но суть не про это

как раз про это. без привязки к функциональности свой ui можешь свернуть в трубочку и засунуть себе в портфолио, будь он деревянный, материальный или фиолетовый в крапинку

xetiji
()

Думаю запихнуть ее как демку в портфолио

В портфолио по специальности «программист» или «UI/UX дизайнер»? Для первого не так важно, как оно выглядит, гораздо большее впечатление произведет грамотная архитектура и чистый код.

Конечно, может быть такая работа, где тебе придется быть и тем, и другим, но, насколько я понимаю, это либо фриланс, либо когда разработка софта не является основный профилем организации.

annulen ★★★★★
()
Ответ на: комментарий от annulen

Для первого не так важно, как оно выглядит, гораздо большее впечатление произведет грамотная архитектура и чистый код

Это для фриланса. Это зависит от того, кто будет смотреть. Если ищут в группу к другим разработчикам - будут смотреть на код. Если заказчик не разработчик, а пользователь, он будет смотреть в основном визуализацию, причем в большей степени как оно все слажено и красивенько нажимается. А смысл нажатий будет вторичен.

victor79
() автор топика
Ответ на: комментарий от annulen

Конечно, может быть такая работа, где тебе придется быть и тем, и другим, но, насколько я понимаю, это либо фриланс, либо когда разработка софта не является основный профилем организации.

Или когда ты добрался до кресла тимлида/тех директора, тогда тебе надо адекватно уметь понимать и оценивать все стороны продукта который вы делаете (чтобы понимать что тут дизайнеры накосячили кривым интерфейсом, а тут программисты лаги завезли и поэтому проект выглядит как поделка пьяного студента). К сожалению далеко не всегда туда добираются люди которые не только языком чесать могут. Но если добираются то проекту гораздо легче делается.

peregrine ★★★★★
()
Последнее исправление: peregrine (всего исправлений: 1)

Добавляй тэги GUI/UI/UX/интерфейс, если хочешь говорить про интерфейс, а не про программирование на C++

https://drive.google.com/file/d/1O3MHCYu8SteUq-tcG_mZLZoiRb3dNJNh/view?usp=sh...

Кто такой «plain jorn»? Какое-то скандинавское имя?

С каких пор у нас в программах меню располагается справа? Это что-то для смартфонов? Тогда почему не троеточие?

На кой черт мне знать ID этих сущностей?

Добавление, переименование, и удаление можно реализовать в самой табличке. В принципе, кнопку добавления можно оставить, а можно и заменить строкой для ввода новой сущности.

Я не знаю, что делают start-hide-stop, но мне кажется... Вот именно, а что они делают вообще?

Я не знаю, как ты собрался учитывать свое время, но лично у меня бы возникало много потребности ввести неучтенное время, которое я не отметил вовремя. Потому что лично я буду очень часто забывать отметиться.

желательно подкрепленные указанием как это сделать на Qt/C++

Как правило, стандартные компоненты Qt ужасны и мало для чего подходят. Хочешь хороший гуй своей аппе — делай что-то кастомное. Сейчас приложуха выглядит так, будто ты её слепил за пять минут, и даже толком кнопки не выровнял — я хз, откуда у тебя эта склонность размещать кнопки в формате 2+1, но многие люди не понимают такого положения.

byko3y ★★★★
()
Ответ на: комментарий от pinus_nigra

типа тайм-трекер

Практический совет - забей. Они не работают

Работают, но только при желании пользователя. Сам по себе тайм-трекер бесполезен.

byko3y ★★★★
()
Ответ на: комментарий от victor79

Там это список проектов. Но понял. Так же понял, что этот момент не понятен. Спасибо

А к какому проекту относится «я съел что-то тухлое»?

byko3y ★★★★
()
Ответ на: комментарий от byko3y

Добавление, переименование, и удаление можно реализовать в самой табличке. В принципе, кнопку добавления можно оставить, а можно и заменить строкой для ввода новой сущности.

+1.

Я не знаю, как ты собрался учитывать свое время, но лично у меня бы возникало много потребности ввести неучтенное время, которое я не отметил вовремя. Потому что лично я буду очень часто забывать отметиться.

Пока не понятно, может, неучтённое автоматически удаляется через н единиц времени, а может как-то выделяется

fernandos ★★★
()
Ответ на: комментарий от javascript

https://dribbble.com/search/time tracker

Меня больше всего убивает на этом сайте отвратительный UX: кнопки sing in/sing up периодически становятся недоступны для нажатия, у окна Sing Up, появляющегося при попытке просмотреть дизайн, два скрола, а кнопки браузера вперед-назад лучше не нажимать, потому что он перебираются страницы по какому-то совершенно нелогичному алгоритму и эти страницы не совпадают с твоей историей просмотра. Ну и конечно же вишенка на торте — бесконечная прокрутка. Любой ублюдочный сайт с пёстрым разноцветным вырвиглазным дизайном обязан иметь бесконечный скрол и быть JS-only. Кстати, очень советую зайти на сайт с отключенными скриптами — это нужно видеть своими глазами.

Ну и напоследок: https://dribbble.com/search/time trecker

byko3y ★★★★
()
Ответ на: комментарий от fernandos

А зачем вообще меню? Чего оно капсом? И зачем мне айди, лучше пускай дата будет. Чего кнопка спрятать не посередине?

Да, меню сейчас удаляю. Кнопка дел в стороне, что бы случайно не нажать. На счет капса это я сам не знаю, может и не нужно.

victor79
() автор топика
Ответ на: комментарий от byko3y

Ну и конечно же вишенка на торте — бесконечная прокрутка.

ИМХО, это не самое худшее, вы попадали на сайты, которые меняют скорость прокрутки? Это настоящий ад.

fernandos ★★★
()
Ответ на: комментарий от fernandos

И зачем мне айди, лучше пускай дата будет.

Это список проектов. Ид можно и не показывать, но тогда будет только название. Маловато. Можно слева дату прицепить последних действий по проекту.

victor79
() автор топика
Ответ на: комментарий от victor79

Если проект в условном гите, можно показывать последний коммит. Если уж айди, то нужна настройка, чтобы отчёт шёл с нуля.

fernandos ★★★
()
Ответ на: комментарий от fernandos

Айди как раз с нуля не должны идти, нулевой айди это пустое значение.

Вот теперь пока такой вид:
https://drive.google.com/file/d/1FgT6Rb14LkN9m2n9UFNRAAJ7Xi3v7nxW/view?usp=sh...

А вот это итоги по проектам, но это пока совсем сырое, просто для пояснения, что так по проектам считается время:
https://drive.google.com/file/d/1swzfhB7avvzvvClbmlcV2ZsIOGzSAFZi/view?usp=sh...

victor79
() автор топика
Ответ на: комментарий от victor79

а это, что, тоже портфолио? Мне кажется это продают, а не фрилансят.

Это сайт для портфолио дизайнеров и ux проектировщиков. Своего рода инстаграм для людей, которые этим занимаются на профессиональной основе.

Там ты можешь черпать идеи для как визуального оформления своих поделий, так и для его ux.

Второй такой сайт behance.net

Третий deviantart.com, но уже в меньшей мере.

javascript
()
Ответ на: комментарий от byko3y

У дрибла прокрутка не бесконечная, она по требованию. Нужно нажимать кнопочку, чтобы подгрузилась следующая порция данных.

javascript
()
Ответ на: комментарий от peregrine

Или когда ты добрался до кресла тимлида/тех директора, тогда тебе надо адекватно уметь понимать и оценивать все стороны продукта который вы делаете (чтобы понимать что тут дизайнеры накосячили кривым интерфейсом, а тут программисты лаги завезли и поэтому проект выглядит как поделка пьяного студента). К сожалению далеко не всегда туда добираются люди которые не только языком чесать могут. Но если добираются то проекту гораздо легче делается

По технической стороне я уже давно туда дорос. Но «там» есть железобетонное препятствие, которое я подымал в треде:

Как качнуть в себе продажника и не разложиться

А именно: клиент/заказчик — идиот, который ничего не понимает в технологиях, потому его можно кормить калом любого качества, и оно всё прокатит. Потому в подавляющем большинстве случаев продается не качество продукта, а рассказы о качестве продукта, или первое впечатление о качестве продукта, или мнение о качестве продукта манагера, который боится подходить к компьютерам. Для продажи этим людям нужны довольно специфичные навыки, который часто плохо совместимы с чисто техническими навыками.

И я подчеркиваю, что сейчас так работают даже очень крупные корпорации, вроде Oracle/SAP/Microsoft, поскольку в айти уже давным-давно доминирует технически неграмотный персонал. Я поставил недавно Fallout Shelter авторства ZeniMax Media, ныне принадлежащего Microsoft — а там угар пьяного индуса с чудовищно неюзабельным интерфейсом, где тяжело попасть по персонажам и отдать им команды, где я только после двадцатого запуска заметил, что в игре есть главное меню, где при довольно примитивном геймплее игра после релиза умудрялась падать у многих людей (судя по отзывам). Годовой оборот ZeniMax — 500 млн долларов. Или возьми недавнюю историю с CD Projekt Red, которые выкатили такой кал, что на них даже в суд подали.

Всё это говорит нам про одно: квалифицированных программистов в мире не стало больше, но снизилась планка требований со стороны потребителя. А кому теперь нужны квалифицированные тех специалисты, когда все программы теперь пишутся на React.js?

byko3y ★★★★
()
Ответ на: комментарий от javascript

Там ты можешь черпать идеи для как визуального оформления своих поделий, так и для его ux.

Понял. Там в основном под стиль QtQuick/Qml.

victor79
() автор топика
Ответ на: комментарий от javascript

У дрибла прокрутка не бесконечная, она по требованию. Нужно нажимать кнопочку, чтобы подгрузилась следующая порция данных

Если ты про «сигн ап ту континуе» — то вроде как формально да, не бесконечная. Правда, при нажатии кнопочки следующая порция не подгружается. Проверял на FF и хроме — никакой кнопочки для конкретно подгрузки не обнаружено.

byko3y ★★★★
()
Ответ на: комментарий от javascript

Там ты можешь черпать идеи для как визуального оформления своих поделий, так и для его ux

UX? Ты можешь дать хотя бы один пример хорошего UX с этого сайта? Это сайты визуального оформления и художеств, но UX там нету.

byko3y ★★★★
()
Ответ на: комментарий от fernandos

ИМХО, это не самое худшее, вы попадали на сайты, которые меняют скорость прокрутки? Это настоящий ад

Не, я на такие помойные сайты еще не попадал.

byko3y ★★★★
()
Ответ на: комментарий от byko3y

Если ты про «сигн ап ту континуе» — то вроде как формально да, не бесконечная. Правда, при нажатии кнопочки следующая порция не подгружается. Проверял на FF и хроме — никакой кнопочки для конкретно подгрузки не обнаружено

Вот после того, как ты сигн ап, у тебя на ее месте будет кнопочка load more. А до тех пор, тебе будут показывать только парт оф всех имеющихся на сайте работ в ограниченном количестве по твоему запросу. Проверять можешь хоть в чем.

javascript
()
Ответ на: комментарий от javascript

А до тех пор, тебе будут показывать только парт оф всех имеющихся на сайте работ в ограниченном количестве по твоему запросу

Я не сигнапнутый, но у меня бесконечный скролл в любых результатах поиска на любых браузерах. Что я делаю не так?

byko3y ★★★★
()

с отступами от границ формы беда - почти все разные. да и в целом с симметрией проблемы. сравни левую/правую границы списка и кнопок add / del/hide

man-from-36
()

На проекте, которым я сейчас занимаюсь, если вижу ассиметрию - сразу триггерит исправить. Вот, что бросилось в глаза сразу:

  1. различное расстояние отступа кнопок Add и Del относительно таблицы;
  2. разная высота кнопок Start и Stop;

Теперь субъективщина:

  1. я бы расположил кнопки Start и Stop рядом, друг под другом хотя бы;
  2. немного странные расстояния между кнопками слева. Я бы расположил так: Start и Stop с небольшим пространством между ними, далее некоторое свободное пространство (в высоту одной кнопки, к примеру), далее Hide и Exit. Группировка по функционалу получится.
PhysShell ★★
()
Ответ на: комментарий от man-from-36

с отступами от границ формы беда - почти все разные. да и в целом с симметрией проблемы.

Спасибо, подправил.

victor79
() автор топика
Ответ на: комментарий от PhysShell

различное расстояние отступа кнопок Add и Del относительно таблицы;
разная высота кнопок Start и Stop;

Спасибо, подправил.

я бы расположил кнопки Start и Stop рядом, ... далее Hide и Exit

Это кажется был предыдущий скриншот, сейчас то же уже подправлено, и именно так как ты описал)

Текущий вариант:
https://drive.google.com/file/d/10Y76vEGZ0qKd8xotISaWAe1u3P6aTr46/view?usp=sh...

victor79
() автор топика
Последнее исправление: victor79 (всего исправлений: 1)

Я бы объединил кнопки Start/Stop. Зачем их две? Нажимаешь на старт, она меняет название/цвет на стоп и обратно.

Зачем указывать полный путь? Я бы заменил /home/user/.local/share/… на ~/.local/share/… – занимает меньше места и не так мозолит глаза.

Im_not_a_robot ★★★★★
()
Последнее исправление: Im_not_a_robot (всего исправлений: 1)

Выровнять? Сейчас кнопки тупо как попало висят, кнопки с верху убрать в лево в бок где и другие, задать размер кнопой одинаковый кроме пары основных. Все должны быть на одинаковом растоянии друг от друга.

LINUX-ORG-RU ★★★★★
()
Последнее исправление: LINUX-ORG-RU (всего исправлений: 1)

Сделал программку тайм-трекер

Думаю запихнуть ее как демку в портфолио

И фотку с кляпом в ошенийке на четвереньках не забудь, если среди интервьюеров будет ПМ, она оценит.

WitcherGeralt ★★
()
Ответ на: комментарий от man-from-36

может как-то так - https://ibb.co/NN6cWzN

Спасибо, так конечно более красиво смотрится. Но в таком виде будут путаться кнопки какие относятся к общим управляющим и какие к управлению списком проектов.

В частности, у меня там кнопка Hide скрывает прогу в систрей полностью, что бы прога не мешалась делать работы.

И есть кнопка Del/Hide (пока не рабочая) которая скрывает проекты из списка актуальных.

Кнопки Старт-стоп разделены что бы их не перепутать даже при сильном возбуждении или опьянении - ведь это деньги.

Там еще позже кнопку Rename уберу, будет только Add && Del/Hide.

victor79
() автор топика
Последнее исправление: victor79 (всего исправлений: 1)
Ответ на: комментарий от Im_not_a_robot

Я бы объединил кнопки Start/Stop. Зачем их две?

Что бы когда о-о-очень сложно попасть во что-либо... пальцем, что бы не промахнуться.

victor79
() автор топика
Ответ на: комментарий от WitcherGeralt

И фотку с кляпом в ошенийке на четвереньках не забудь

В ИТ за это платят мало, это нужно в другую тематику. Но я думаю, я в ту тематику по параметрам не подойду, будут платить еще меньше.

victor79
() автор топика
Ответ на: комментарий от victor79

Что бы когда о-о-очень сложно попасть во что-либо… пальцем, что бы не промахнуться.

Ну так когда кнопок много, вероятность промазать или задеть соседнюю гораздо больше.

Im_not_a_robot ★★★★★
()
Ответ на: комментарий от byko3y

А именно: клиент/заказчик — идиот, который ничего не понимает в технологиях, потому его можно кормить калом любого качества, и оно всё прокатит.

Ну вот из-за таких идей ты и не можешь качнуть в себе продажника. Если ты в глубине души считаешь клиентов и заказчиков идиотами, не обессудь, если они считают тебя мудаком :)

Продавать людям продукт, который им действительно нужен, выгоднее, чем продавать им кал. Другое дело, если ты продаешь хороший продукт так, как будто это кал, а твой сосед продает кал, как будто это хороший продукт, то выбор клиента очевиден, и перевернуть это сможет только репутация брэнда или хороший сарафан.

сейчас так работают даже очень крупные корпорации, вроде Oracle/SAP/Microsoft

А вот они как раз могут себе позволить торговать дерьмом, так как имеют уважаемые брэнды. Рано или поздно это аукнется, но к тому времени эффективные менеджеры уже заработают на старость. С другой стороны, клиенты знают, что в случае какого-то критичного факапа большая богатая корпорация починит свою поделку, а мелкий подрядчик может и загнуться.

Я поставил недавно Fallout Shelter авторства ZeniMax Media, ныне принадлежащего Microsoft — а там угар пьяного индуса с чудовищно неюзабельным интерфейсом

  1. это не продукт мелкомягких, они просто купили чужой прибыльный бизнес; 2) UX в игре это далеко не главное, игру продают геймплей, история и (в особенности для f2p) аддиктивность - если все это есть, кривой UX игроки простят, если это не казуалочка для домохозяек и пенсионеров.

Или возьми недавнюю историю с CD Projekt Red, которые выкатили такой кал, что на них даже в суд подали.

Haters gonna hate. Сделать кал и наобещать с три короба и не потянуть - не одно и то же.

А кому теперь нужны квалифицированные тех специалисты, когда все программы теперь пишутся на React.js?

Например, тем, кто не настолько богат, чтобы нанимать студентов за еду, а потом нанимать специалистов для переписывания

annulen ★★★★★
()
Ответ на: комментарий от victor79

Это для фриланса

Тогда изучай UX/usability, читай литературу, блоги по этой теме, может даже на курсы какие-то стоит записаться. Даже если ты по натуре не художник и с чувством прекрасного не очень, есть куча правил и закономерностей, которые помогут сделать хорошо и удобно. Еще можно HIG’и разных платформ поизучать, там есть чему поучиться, даже если нет требования им соотвествовать.

А если просто нарисовать форму и довести ее до ума по советам с форума, то ты ничему не научишься и в реальном проекте налажаешь.

annulen ★★★★★
()
Ответ на: комментарий от victor79

Еще если есть возможность «передрать» интерфейс чужой программы, которая делает что-то похожее и тебе нравится, то лучше сплагиатить, чем городить отсебятину без четкого понимания, чем твой дизайн лучше чужого.

annulen ★★★★★
()
Ответ на: комментарий от PhysShell

различное расстояние отступа кнопок Add и Del относительно таблицы;
разная высота кнопок Start и Stop;

Это уже пиксельхантинг. По UX там тотальные проблемы, а с разной высотой кнопок вполне можно жить.

byko3y ★★★★
()
Ответ на: комментарий от byko3y

По UX там тотальные проблемы

А чуточку поподробней можно? Хотя бы намекни, отошли к конкретным правилам, раз уж разбираешься.

victor79
() автор топика
Ответ на: комментарий от annulen

Еще если есть возможность «передрать» интерфейс чужой программы, которая делает что-то похожее и тебе нравится, то лучше сплагиатить

Это я посмотрел как работает трекер у Upwork, и захотел себе такой для своих локальных клиентов.

victor79
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.