Wiki source code of App Within Minutes - Improvements (7.x)
Last modified by Ecaterina Moraru (Valica) on 2016/02/16 18:34
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{velocity}} | ||
| 2 | $xwiki.ssx.use("Improvements.WebHome") | ||
| 3 | $xwiki.ssx.use("Standards.WebHome") | ||
| 4 | $xwiki.ssx.use("Improvements.DocumentationFlavor") | ||
| 5 | {{/velocity}} | ||
| 6 | |||
| 7 | The purpose of this proposal is to help integrate the following applications created with App Within Minutes with Flamingo Skin. | ||
| 8 | |||
| 9 | |||
| 10 | |||
| 11 | |||
| 12 | |||
| 13 | |||
| 14 | |||
| 15 | |||
| 16 | (% class="left column50 dashboardleft" %) | ||
| 17 | ((( | ||
| 18 | == Proposal == | ||
| 19 | |||
| 20 | {{toc start="3"/}} | ||
| 21 | ))) | ||
| 22 | |||
| 23 | (% class="right column50 dashboardright" %) | ||
| 24 | ((( | ||
| 25 | == Overview == | ||
| 26 | Before - after proposal | ||
| 27 | |||
| 28 | {{gallery}} | ||
| 29 | image:before&afterStep1.png | ||
| 30 | image:before&afterStep2.png | ||
| 31 | image:before&afterStep3.png | ||
| 32 | image:before&afterHomepage.png | ||
| 33 | {{/gallery}} | ||
| 34 | ))) | ||
| 35 | |||
| 36 | (% class="clearfloats" %) | ||
| 37 | ((( | ||
| 38 | |||
| 39 | ))) | ||
| 40 | |||
| 41 | |||
| 42 | (% class="left column50 dashboardleft" %) | ||
| 43 | ((( | ||
| 44 | === Wizard header === | ||
| 45 | |||
| 46 | This pattern is widely implemented when users have to fill in data in multiple steps. The purpose of this pattern is to: | ||
| 47 | |||
| 48 | * Guide users | ||
| 49 | * Explain the scope of the process by clearly stating how many steps are needed to complete it | ||
| 50 | * Show the user’s current position in the process by visually highlighting the current step | ||
| 51 | ))) | ||
| 52 | |||
| 53 | (% class="right column50 dashboardright" %) | ||
| 54 | ((( | ||
| 55 | {{gallery}} | ||
| 56 | image:WizardHeader1.png | ||
| 57 | image:WizardHeader2.png | ||
| 58 | image:WizardHeader3.png | ||
| 59 | {{/gallery}} | ||
| 60 | ))) | ||
| 61 | |||
| 62 | (% class="clearfloats" %) | ||
| 63 | ((( | ||
| 64 | |||
| 65 | ))) | ||
| 66 | |||
| 67 | |||
| 68 | |||
| 69 | (% class="left column50 dashboardleft" %) | ||
| 70 | ((( | ||
| 71 | === Icons === | ||
| 72 | |||
| 73 | Here I've added icons for all fields and small titles, but also changed the previous added icons with the ones from font awesome (see photo number 4 from gallery.) | ||
| 74 | The benefits of icons in a graphical user interface (GUI) include: | ||
| 75 | |||
| 76 | * Icons can be visually pleasing and enhance the aesthetic appeal of a design | ||
| 77 | * They support the notion of a product family or suite when the same icons and style are used in several places | ||
| 78 | * Good icons can make the look of a webpage more pleasing | ||
| 79 | * Icons are fast to recognize at a glance (if well designed) — particularly true for standard icons that people have seen and used before | ||
| 80 | ))) | ||
| 81 | |||
| 82 | (% class="right column50 dashboardright" %) | ||
| 83 | ((( | ||
| 84 | {{gallery}} | ||
| 85 | image:applicationName.png | ||
| 86 | image:steps.png | ||
| 87 | image:fieldPalette.png | ||
| 88 | image:fields.png | ||
| 89 | image:description.png | ||
| 90 | image:columns.png | ||
| 91 | image:icon.png | ||
| 92 | image:tip.png | ||
| 93 | {{/gallery}} | ||
| 94 | ))) | ||
| 95 | |||
| 96 | (% class="clearfloats" %) | ||
| 97 | ((( | ||
| 98 | |||
| 99 | ))) | ||
| 100 | |||
| 101 | |||
| 102 | |||
| 103 | (% class="left column50 dashboardleft" %) | ||
| 104 | ((( | ||
| 105 | === Homepage === | ||
| 106 | |||
| 107 | I made some changes on the homepage also: | ||
| 108 | |||
| 109 | * I replaced the 5 links from the anterior action box, with a button and a dropdown menu list. I find it more user friendly and more compatible with Flamingo Skin | ||
| 110 | * I also deleted some empty space | ||
| 111 | ))) | ||
| 112 | |||
| 113 | (% class="right column50 dashboardright" %) | ||
| 114 | ((( | ||
| 115 | {{gallery}} | ||
| 116 | image:Homepage1.png | ||
| 117 | image:Homepage.png | ||
| 118 | {{/gallery}} | ||
| 119 | ))) | ||
| 120 | |||
| 121 | (% class="clearfloats" %) | ||
| 122 | ((( | ||
| 123 | |||
| 124 | ))) | ||
| 125 | |||
| 126 | |||
| 127 | |||
| 128 | (% class="left column50 dashboardleft" %) | ||
| 129 | ((( | ||
| 130 | == Remove tabbed information == | ||
| 131 | |||
| 132 | Another thing that I think we should change is to remove the tabbed information from the bottom of the homepage (comments, attachments, history, information). | ||
| 133 | You can see the difference in the gallery. | ||
| 134 | ))) | ||
| 135 | |||
| 136 | (% class="right column50 dashboardright" %) | ||
| 137 | ((( | ||
| 138 | {{gallery}} | ||
| 139 | image:noDocextra.png | ||
| 140 | image:docextra.png | ||
| 141 | {{/gallery}} | ||
| 142 | ))) | ||
| 143 | |||
| 144 | (% class="clearfloats" %) | ||
| 145 | ((( | ||
| 146 | |||
| 147 | ))) |
