{"id":9469,"date":"2020-07-22T09:57:25","date_gmt":"2020-07-22T07:57:25","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=9469"},"modified":"2025-05-07T12:17:35","modified_gmt":"2025-05-07T10:17:35","slug":"wsparcie-ux-design-w-prototypowaniu-aplikacji-fiori","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/wsparcie-ux-design-w-prototypowaniu-aplikacji-fiori\/","title":{"rendered":"Wsparcie UX Design w prototypowaniu aplikacji Fiori"},"content":{"rendered":"\n

Ka\u017cdy z nas zastanawia\u0142 si\u0119 na pewno, jak zaprojektowa\u0107 tak\u0105 aplikacj\u0119, kt\u00f3rej u\u017cytkownicy nie przeklinaliby ka\u017cdego dnia pracy z ni\u0105. Projekty SAP s\u0105 na tyle zr\u00f3\u017cnicowane, \u017ce nie zawsze mamy okazj\u0119 tworzy\u0107 produkty \u201eod zera\u201d, co przek\u0142ada si\u0119 na nasz\u0105 wiedz\u0119 o projektowaniu. Niezale\u017cnie od Twojego do\u015bwiadczenia, dzi\u015b wejdziemy bocznymi drzwiami do \u015bwiata projektowania u\u017cytkowych aplikacji opieraj\u0105cych si\u0119 o SAP UI5\/Fiori.<\/p>\n\n\n\n

Na evencie SAP TechEd w 2016, pokazana zosta\u0142a darmowa w\u00f3wczas aplikacja Build.me<\/a>. Tak jak rozwijany jest framework UI5 i Fiori, tam samo ewoluuje BUILD. W tym momencie BUILD obs\u0142uguje ca\u0142y proces „od idei” a\u017c do fazy programowania. Dostarcza wiedzy, narz\u0119dzi i inspiracji, aby stworzy\u0107 dobre i u\u017cytkowe aplikacje. Ca\u0142o\u015b\u0107 opiera si\u0119 o sprawdzone praktyki wytwarzania oprogramowania zgodne z UX Design. Je\u015bli to poj\u0119cie jest dla Ciebie wci\u0105\u017c obce to… bardzo dobrze, b\u0119dziesz mia\u0142 okazj\u0119 rozszerzy\u0107 swoje horyzonty ;-).<\/p>\n\n\n\n

To jest to czego szuka\u0142em!<\/h2>\n\n\n\n

Niezale\u017cnie czy jeste\u015b konsultantem biznesowym, czy te\u017c deweloperem, spotyka\u0142y Ci\u0119 sytuacje (lub spotkaj\u0105), gdy z klientem trzeba uzgodni\u0107 funkcjonalno\u015b\u0107 aplikacji, spos\u00f3b w jaki realizowane b\u0119d\u0105 cele biznesowe, czy te\u017c jaki b\u0119dzie flow aplikacji, tak by by\u0142a ona przyjazna dla u\u017cytkownika i przejrzysta w dzia\u0142aniu.<\/p>\n\n\n\n

BUILD wspiera projektowanie aplikacji niezale\u017cnie od etapu projektu (Obraz 1<\/strong>). We wczesnej fazie projektowania, gdy zesp\u00f3\u0142 posiada jedynie pomys\u0142y, kt\u00f3re chcia\u0142by przedyskutowa\u0107 ze stakeholderami, mo\u017cna pos\u0142ugiwa\u0107 si\u0119 makietami.<\/p>\n\n\n\n

\"Etapy<\/a>
Ryc. 1 Etapy projektowania wspierane przez Build.me<\/figcaption><\/figure>\n\n\n\n

Mog\u0105 to by\u0107 zwyczajne kartki papieru z narysowanym interfejsem graficznym aplikacji. Takie \u201epomys\u0142y\u201d mo\u017cna nast\u0119pnie przenie\u015b\u0107 w formie obraz\u00f3w do BUILD i zdefiniowa\u0107 nawigacj\u0119 mi\u0119dzy ekranami (Obraz<\/strong> 2<\/strong>) tak, aby zwizualizowa\u0107 sobie dzia\u0142anie przysz\u0142ej aplikacji.<\/p>\n\n\n\n

\"wireframe<\/a>
Ryc. 2 Prototypowanie aplikacji na podstawie makiety<\/figcaption><\/figure>\n\n\n\n

W \u015bwiecie SAP nie rzadko zdarza si\u0119, \u017ce pewnych wymaga\u0144 klienta, b\u0105d\u017a konsultanta nie jeste\u015bmy w stanie spe\u0142ni\u0107 np. ze wzgl\u0119du na ograniczenia framework\u00f3w. Niepodwa\u017caln\u0105 zalet\u0105 Build.me jest to, \u017ce w momencie, gdy zesp\u00f3\u0142 zdecyduje si\u0119 zaprojektowa\u0107 jaki\u015b wycinek aplikacji, to ma pewno\u015b\u0107, \u017ce wygl\u0105d i jej dzia\u0142anie, b\u0119dzie mo\u017cliwe do oprogramowania w ramach UI5\/Fiori.<\/p>\n\n\n\n

W momencie, gdy zesp\u00f3\u0142 zdecyduje si\u0119 p\u00f3j\u015b\u0107 konkretn\u0105 drog\u0105 i idea aplikacji zacznie si\u0119 krystalizowa\u0107, mo\u017cna przej\u015b\u0107 do kolejnego kroku, w kt\u00f3rym prototypowana b\u0119dzie aplikacja w oparciu o wspomniany framework (Obraz 3<\/strong>).<\/p>\n\n\n\n

Warto wspomnie\u0107, \u017ce nie jest potrzebna wiedza techniczna, ani umiej\u0119tno\u015bci programowania, aby m\u00f3c zbudowa\u0107 prototyp aplikacji. Narz\u0119dzie pozwala przenosi\u0107 komponenty (tabele, ikony, przyciski itp.) z palety. Id\u0105c dalej, mo\u017cliwe jest zaimportowanie testowych danych z pliku Excel i podpi\u0119cie ich pod komponenty, tak aby aplikacja mog\u0142a symulowa\u0107 prac\u0119 na rzeczywistej konstelacji danych.<\/p>\n\n\n\n

\"Prototypowanie<\/a>
Ryc. 3 Prototypowanie aplikacji Fiori<\/figcaption><\/figure>\n\n\n\n

BUILD to nie tylko prototypowanie<\/h2>\n\n\n\n

UX Design to nie tylko prototypowanie aplikacji z klientem. Jednym z za\u0142o\u017ce\u0144 jest tworzenie person i definiowanie ich potrzeb. Kolejnym krokiem jest oddawanie stakeholderom prototypu do testowania, aby zebra\u0107 jak najwi\u0119cej uwag, odno\u015bnie poprawy funkcjonowania projektowanej aplikacji.<\/p>\n\n\n\n

BUILD wspiera r\u00f3wnie\u017c ten etap. UX Designer mo\u017ce przygotowa\u0107 zestaw pyta\u0144, interfejsy graficzne oraz udost\u0119pni\u0107 prototyp, a u\u017cytkownicy mog\u0105 realizowa\u0107 swoje scenariusze biznesowe i r\u00f3wnolegle mog\u0105 dawa\u0107 feedback (Obraz  4<\/strong>). Ponadto narz\u0119dzie w trybie review, pozwala wy\u015bwietli\u0107 heatmap\u0119, czyli interfejs graficzny aplikacji z na\u0142o\u017conym filtrem, gdzie wy\u015bwietlane s\u0105 informacje o tym, kt\u00f3re fragmenty aplikacji by\u0142y najcz\u0119\u015bciej wykorzystywane.<\/p>\n\n\n\n

\"wireframe<\/a>
Ryc. 4 Przegl\u0105danie uwag u\u017cytkownik\u00f3w po oddaniu prototypu do testowania<\/figcaption><\/figure>\n\n\n\n

Build.me to tak\u017ce wsparcie merytoryczne<\/h2>\n\n\n\n

Musimy mie\u0107 \u015bwiadomo\u015b\u0107, \u017ce przy naprawd\u0119 z\u0142o\u017conych projektach, nic nie zast\u0105pi wiedzy i do\u015bwiadczenia UX Designera. R\u00f3wnie\u017c sam team najcz\u0119\u015bciej nie ma odpowiedniej wiedzy, w jaki spos\u00f3b przebiega proces projektowania interakcji. Z tego wzgl\u0119du, Build.me wspiera merytorycznie swoich u\u017cytkownik\u00f3w. Pozwala im prze\u015bledzi\u0107 ka\u017cdy z krok\u00f3w projektowania, przy czym daje wskaz\u00f3wki i potrzebny know-how, aby jak najlepiej m\u00f3c tworzy\u0107 produkt (Obraz 5<\/strong>).<\/p>\n\n\n\n

\"Materia\u0142y<\/a>
Ryc. 5 Materia\u0142y dydaktyczne<\/figcaption><\/figure>\n\n\n\n

Co\u015b dla pocz\u0105tkuj\u0105cych developer\u00f3w<\/h2>\n\n\n\n

Build.me oferuje Web IDE Extension, kt\u00f3ry pozwala na import prototypu do wspomnianego \u015brodowiska SAP Web IDE. Ca\u0142y projekt jest t\u0142umaczony na kod \u017ar\u00f3d\u0142owy. Zadaniem dewelopera pozostaje jedynie obs\u0142uga oData i niestandardowych wymaga\u0144 klienta. W moim odczuciu to rozwi\u0105zanie jest akceptowalne jedynie w mniejszych projektach, gdy\u017c kod, kt\u00f3ry zostaje wygenerowany, nale\u017cy i tak dopasowa\u0107 do wytycznych programistycznych klienta, co jest pracoch\u0142onne.<\/p>\n\n\n\n

\u0179r\u00f3d\u0142a<\/h2>\n\n\n\n
    \n
  1. Dokumentacja build.me<\/li>\n<\/ol>\n\n\n
    \n \n
    \n \n
    \n
    \n \n\n
    <\/div>\n <\/div>\n
    \n \n\n
    <\/div>\n <\/div>\n
    \n \n\n
    <\/div>\n <\/div>\n
    \n \n\n
    <\/div>\n <\/div>\n
    \n \n\n
    <\/div>\n <\/div>\n <\/div>\n \n
    \n
    \n \n\n
    <\/div>\n <\/div>\n
    \n \n\n
    <\/div>\n <\/div>\n
    \n \n\n
    <\/div>\n <\/div>\n
    \n \n\n
    <\/div>\n <\/div>\n
    \n \n\n
    <\/div>\n <\/div>\n <\/div>\n<\/div>\n \n\n
    \n 5\/5 ( votes: 2) <\/div>\n <\/div>\n","protected":false},"excerpt":{"rendered":"

    Ka\u017cdy z nas zastanawia\u0142 si\u0119 na pewno, jak zaprojektowa\u0107 tak\u0105 aplikacj\u0119, kt\u00f3rej u\u017cytkownicy nie przeklinaliby ka\u017cdego dnia pracy z ni\u0105. … Continued<\/a><\/p>\n","protected":false},"author":242,"featured_media":15243,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1316],"tags":[548,946,702,700,945],"class_list":["post-9469","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-na-miekko","tag-sap","tag-prototypowanie","tag-sap-fiori","tag-ui5","tag-ux-design"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2020\/07\/BlogersiiCovery-UXfiori.jpg","category_names":["Development na mi\u0119kko"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/9469"}],"collection":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/users\/242"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/comments?post=9469"}],"version-history":[{"count":2,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/9469\/revisions"}],"predecessor-version":[{"id":25110,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/9469\/revisions\/25110"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media\/15243"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media?parent=9469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/categories?post=9469"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/tags?post=9469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}