eBaw - HackMD

# eBaw EBaw is an online shopping and sales platform, in the form of auctions or regular sales with a fixed price, for all types of products. # A3: User Interface Prototype The PUI (or horizontal prototype) has the following objectives: - draw the PUI - identify and design requirements - create a basis on which to support usability This artifact includes five elements: 1. The general principles and characteristics common to all pages. 2. Sitemap 3. Interactions to illustrate the flow 4. Interfaces 5. Wireflows ## 1. Common interface and features eBaw's general interface consists of a set of web pages built using HTML5, CSS3, JavaScript and the BootStrap framework. This framework simplifies the development of fluid schemes and capable of responsively adapting to various device sizes. <img src="https://i.imgur.com/RUYipV5.png" alt="figure" width="525" height="auto"/> <img src="https://i.imgur.com/Ntfiu2W.png" alt="figure" width="166" height="auto"/> Image 1: Product List In this figure we have the general appearance common to all pages: \ source: Open-Sans \ text color: # 2b2a29 A. Header with background color: # 1f4d6e 1. Logo (which points to the Landing Page / Product List) 2. Help & Contact 3. FAQ 4. BuyItNow (filtered product list) 5. Auction (filtered product list) 6. Sell 7. Menu (history / profile / edit / search for others) 8. Notifications 9. Username (which points to our profile) or Register 10. Sign Out or Sign In B. Central body with background color: # f8f9fa \ 11. Search bar C. Footer with background color: # b2b3b3 \ 12. Sell \ 13. Profile \ 14. Edit profile \ 15. Shopping \ 16. BuyItNow (filtered product list) \ 17. Auction (filtered product list) \ 18. Help & Contact \ 19. History \ 20. About us \ 21. Home (which points to the Landing Page / Product List) \ 22. FAQ \ 23. Logout 24. Burger button that when expanded shows the remaining header options, according to 'A' ## 2. Sitemap ![](https://i.imgur.com/kFts2n1.png) Image 2: Sitemap ## 3. Storyboards The following storyboards show the interactions within the system and navigations between pages. ![](https://i.imgur.com/p46utjN.png) Image 3: Sign-Up and Login wireflow ![](https://i.imgur.com/h2xI707.png) Image 4: Storyboard of how to buy a product ![](https://i.imgur.com/WFNqFwx.png) Image 5: Storyboard of how to sell a product ![](https://i.imgur.com/7e4x2yu.png) Image 6: Storyboard taking into account the administrator's options ## 4. Interfaces In this section, the most important interfaces of the platform are exposed. Some of those interfaces have several sub-interfaces, in the form of separators, for instance in the case of the profile, where a customer can view his data (General and Details tab), consult his transaction history (History tab), edit his data (Edit Profile tab) and consult his notifications (Notifications tab). All of those mentioned are separate tabs on the same page. There are more examples that will be explained when the specific page presentation is inserted. All interfaces presented are prototypes of what will eventually be the final pages. Note that some features on the platform pages change depending on whether you are an unregistered user, or a registered user or an administrator of the platform. As an example, the administrator sees in each product a button to remove the product from the platform, while a registered user that isn't its seller, on the same button, will have the functionality to make a purchase or a bid, whether in BuyItNow or Auction mode, respectively. Each page shown will specify these features in the introduction. The navigation bar changes depending on whether you are an unregistered user or a registered user. You can view Login and Register, in one case, and in the other the username username and Logout, respectively. In the footer we can see the same links available in the navigation bar. UI Listing: * UI01: Landing Page * UI02: Login * UI03: Sign-Up * UI04: Password recovery * UI05: Create product * UI06: Product list * UI07: Product page * UI08: Help & Contact * UI09: FAQ * UI10: Profile * UI11: Search other users * UI12: Administration * UI13: Report ### UI01: Landing Page The Landing Page is the entry point of the platform and is accessible at any time by an unregistered user. The page focuses on the most notable auctions on the website, such as the ones with the most bids, as well as the most visited products with a fixed price, that is, products defined with the BuyItNow selling mode. <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/index_lg.png" alt="figure" width="525" height="auto"/> <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/index_sm.png" alt="figure" width="166" height="auto"/> <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/index_lg_Categories.png" alt="figure" width="525" height="auto"/> Image 7: Landing page Link: http://lbaw1856-piu.lbaw-prod.fe.up.pt/ ### UI02: Login The Login page allows the already registered users to authenticate themselves. <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/logIn_lg.png" alt="figure" width="525" height="auto"/> <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/logIn_sm.png" alt="figure" width="166" height="auto"/> Image 8: Login Link: http://lbaw1856-piu.lbaw-prod.fe.up.pt/logIn.html ### UI03: Sign-Up The Sign-Up page allows any invited user to register on the platform. <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/register_lg.png" alt="figure" width="525" height="auto"/> <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/register_sm.png" alt="figure" width="166" height="auto"/> Image 9: Sign-Up Link: http://lbaw1856-piu.lbaw-prod.fe.up.pt/register.html ### UI04: Password Recovery The password Recovery page allows registered users that forgot their login data to request it. <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/recuperarPalavraPasse_lg.png" alt="figure" width="525" height="auto"/> <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/recuperarPalavraPasse_sm.png" alt="figure" width="166" height="auto"/> Image 10: Password Recovery Link: http://lbaw1856-piu.lbaw-prod.fe.up.pt/recuperarPalavraPasse.html ### UI05: Create Product The Create Product page allows an authenticated to sell products, either as an auction or as BuyItNow, filling several fields on a submission form. <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/criarProdutoPage_lg.png" alt="figure" width="525" height="auto"/> <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/criarProdutoPage_sm.png" alt="figure" width="166" height="auto"/> Image 11: Create Product Link: http://lbaw1856-piu.lbaw-prod.fe.up.pt/criarProdutoPage.html ### UI06: Product List The Product List page display all the products currently active, sorted in several different ways and paginated. <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/list_products_lg.png" alt="figure" width="525" height="auto"/> <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/list_products_sm.png" alt="figure" width="166" height="auto"/> Image 12: Product List Link: http://lbaw1856-piu.lbaw-prod.fe.up.pt/list_products.html ### UI07: Product Page The Product Page is accessed by clicking on the description, on the image, or on the product name. The contents of the action buttons on this page change depending on the user. That is, if the user is an administrator, there is no option to buy or bid on the product, but will only have the functionality to remove the product. The report button at the top right of the page will not be visible. The same happens in the comments section, after the product description, where the administrator will have the option to remove comments. If the user is the seller of the product, he also won't have the option to buy or bid on his product but instead the option to edit or cancel the product. If the user has purchased the product, or has offered the highest bid after the auction ends, the button will display Pay instead of Buy Now. <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/ProductPage_lg.png" alt="figure" width="525" height="auto"/> <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/ProductPage_sm.png" alt="figure" width="166" height="auto"/> Image 13: Product Page displaying a BuyItNow product Link: http://lbaw1856-piu.lbaw-prod.fe.up.pt/ProductPagePay.html <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/ProductPageAuction_lg.png" alt="figure" width="525" height="auto"/> <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/ProductPageAuction_sm.png" alt="figure" width="166" height="auto"/> Image 14: Product Page displaying an Auction product Link: http://lbaw1856-piu.lbaw-prod.fe.up.pt/ProductPageAuction.html <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/ProductPagePay_lg.png" alt="figure" width="525" height="auto"/> <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/ProductPagePay_sm.png" alt="figure" width="166" height="auto"/> Image 15: Product Page (either Auction or BuyItNow) displaying a product waiting to be paid <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/ProductPage-asSeller_lg.png" alt="figure" width="525" height="auto"/> <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/ProductPage-asSeller_sm.png" alt="figure" width="166" height="auto"/> Image 16: Product Page as seen by its seller <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/ProductPage-asAdmin_lg.png" alt="figure" width="525" height="auto"/> <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/ProductPage-asAdmin_sm.png" alt="figure" width="166" height="auto"/> Image 17: Product Page as seen by an administrator ### UI08: Help & Contact The Help & Contact page shows the users a way to contact the administration of the platform. <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/ContactUs_lg.png" alt="figure" width="525" height="auto"/> <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/ContactUs_sm.png" alt="figure" width="166" height="auto"/> Image 18: Help & Contact page Link: http://lbaw1856-piu.lbaw-prod.fe.up.pt/ContactUs.html ### UI09: FAQ The FAQ page show the users the most frequently asked questions about the plataform. <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/faq_lg.png" alt="figure" width="525" height="auto"/> <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/faq_sm.png" alt="figure" width="166" height="auto"/> Image 19: FAQ page Link: http://lbaw1856-piu.lbaw-prod.fe.up.pt/faq.html ### UI10: Profile The user profile page can be accessed by clicking on the user name or in the drop-down menu and then View Profile option, if the user has logged on. On this page, as explained initially, five tabs are presented. The General tab with the information of the respective user, the Details tab with contact information of the user, the History tab with the information of all the commercial transactions carried out, that is, it presents past purchases and sales classified as Inactive, and Current Purchases, Auctions and BuyItNow classified as Active. Active Purchases are all that are waiting for payment, active Auctions are auctions where the user has placed a bid but the deadline has not yet expired and active BuyItNow products are in the same way the products at a fixed price that are on sale and not yet purchased. Then there is the Edit Profile tab, where the user can change his personal data, and finally the Notifications tab that contains a record of the notifications received. <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/profile_lg.png" alt="figure" width="525" height="auto"/> <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/profile_sm.png" alt="figure" width="166" height="auto"/> Image 20: Profile Page Link: http://lbaw1856-piu.lbaw-prod.fe.up.pt/profile.html <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/profile_editar_lg.png" alt="figure" width="525" height="auto"/> <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/profile_editar_sm.png" alt="figure" width="166" height="auto"/> Image 21: Profile Page, Edit tab <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/modal.png" alt="figure"/> Image 22: Account Cancelation Confirmation _modal_ (confirmation _modal_ example) <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/profileHistorico_lg.png" alt="figure" width="525" height="auto"/> <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/profileHistorico_sm.png" alt="figure" width="166" height="auto"/> Image 23: Profile Page, History tab <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/profileNotificacoes_lg.png" alt="figure" width="525" height="auto"/> <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/profileNotificacoes_sm.png" alt="figure" width="166" height="auto"/> Image 24: Profile Page, Notifications tab ### UI11: Search Other Users The Other Users page is accessed through the dropdown menu. It can be viewed by any registered or unregistered user. The page presents a list of platform users with the option to search and visit the user's profile. Visiting another user's profile will change the display of the information depending on whether the user is logged on or not logged on. If you aren't a logged user you will only have access to general information about other users. If you are a logged user, you will have access to general information and user details. <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/outrosPerfis_lg.png" alt="figure" width="525" height="auto"/> <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/outrosPerfis_sm.png" alt="figure" width="166" height="auto"/> Image 25: Search Other Users page Link: http://lbaw1856-piu.lbaw-prod.fe.up.pt/outrosPerfis.html ### UI12: Administration A página de Administração é acessível apenas ao(s) administrador(es). Inclui as ferramentas necessárias para o administrador fazer a gestão da plataforma. Para o efeito, temos três sub-interfaces: Denúncias, Histórico de Bans, e Adicionar Admin. O primeiro mostra os registos de denúncias ainda não resolvidas e as ações que podem ser tomadas com recurso aos botões do lado direito. O Histórico de Bans contém os registos de denuncias passadas que já foram resolvidas. Por último, em Adicionar Admin a funcionalidade de adicionar um administrador. <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/admin_lg.png" alt="figure" width="525" height="auto"/> <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/admin_sm.png" alt="figure" width="166" height="auto"/> Image 26: Administration Page (report history tab) Link: http://lbaw1856-piu.lbaw-prod.fe.up.pt/admin.html <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/admin-banindos_lg.png" alt="figure" width="525" height="auto"/> <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/admin-banindos_sm.png" alt="figure" width="166" height="auto"/> Image 27: Administration Page (banned user history tab) Link: http://lbaw1856-piu.lbaw-prod.fe.up.pt/admin.html <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/admin-adicionar_lg.png" alt="figure" width="525" height="auto"/> <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/admin-adicionar_sm.png" alt="figure" width="166" height="auto"/> Image 28: Administration Page (add user tab) Link: http://lbaw1856-piu.lbaw-prod.fe.up.pt/admin.html <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/admin-utilizadores_lg.png" alt="figure" width="525" height="auto"/> <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/admin-utilizadores_sm.png" alt="figure" width="166" height="auto"/> Image 29: Administration Page (user search tab) Link: http://lbaw1856-piu.lbaw-prod.fe.up.pt/admin.html ### UI13: Report <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/adminDenunciaPage_lg.png" alt="figure" width="525" height="auto"/> <img src="https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/adminDenunciaPage_sm.png" alt="figure" width="166" height="auto"/> Figura 30: Report Page Link: http://lbaw1856-piu.lbaw-prod.fe.up.pt/adminDenunciaPage.html <div style="page-break-after: always;"></div> ## Anexx: Wireflows ![](https://git.fe.up.pt/lbaw/lbaw18/lbaw1856/raw/master/a3_screenshots/wireflows.jpg) Image 31: Wireflows <div style="page-break-after: always;"></div> ## Histórico de Revisões *** GROUP2036, 17/2/2020 * Henrique Miguel Bastos Gonçalves, up201608320@fe.up.pt * João Ruano Neto Veiga de Macedo, up201704464@fe.up.pt * Luis Ricardo Marques Oliveira, up201607946@fe.up.pt (editor) * Ricardo Manuel Gonçalves da Silva, up201607780@fe.up.pt

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.