I treat lo-fis as a form of digital rough sketching and this method makes them fun to create, during this phase of my project I don’t overly focus on making it look perfect because I use it as a way of figuring out how things will look more or less; this phase of the project is also when I start to create a design system for my project, I add to it as I go on and they are eventually turned into components during the hi-fi development phase.
I wanted to create an AR that wasn’t obstructive at all by hiding most of the features whilst maintaining the intuitiveness of it all, I believe I’ll be able to showcase that vision really well in my hi-fi development phase.
Something challenging I came across during my lo-fis was my nav bar. I knew it wasn't going to be easy bringing it to life but I liked challenge it presented hence I persisted and went ahead with it
https://www.figma.com/design/BgKY5jTcONPWiDkESHvfjQ/IXD304?node-id=17-483&t=Ve5VTdwKglEuyi7H-1
When I initially creative my nav bar it defied my whole principle of creating a non-obtrusive UI, the nav bar was always displayed at the bottom hence I decided to change that by making it disappear after a few seconds of not interacting with it, basically when the mouse (users eyes) isn’t on the nav bar, it’ll automatically disappear and the only thing left behind will be a small arrow that allows them to retrieve the nav bar whenever they desire; I also decided to include the option of hiding the nav bar away if the user is impatient for it to disappear.
The arrows I created for the interactive nav bar turn red when the user glances over them, they then blink to basically click on it. This component was easy and quick to create
Creating these components was quite fun as well. I came across the same issue with this as I did with my nav bar, it was obtrusive hence I found a way for users to hide it and retrieve it whenever they please. Basically there will be a small circle with an arrow on the left side of the screen and the opacity/ clarity of said circle will change according to the lighten in the background, this will then make it visible but not obtrusive for the user.
As tedious of a task as it may have been I also very much enjoyed making these components. They work the same as the interactive arrows in the nav bar, although when clicked on nothing happens, they are simpler there as displays.
These are some of the initial screens during my development phase. I had to change the background because I realised that as a prototype it wouldn’t be helpful each screen had a different room, because in the real world if a user were to go to the nav bar and select a room and the smart devices they wish to control in said room, their whole field of vision wouldn’t change.
These are some of the final screens, and as seen there are some changes, the features on the left have an opaque background and this allows them to be more visible to the viewer.
https://www.figma.com/design/BgKY5jTcONPWiDkESHvfjQ/IXD304?node-id=48-16&t=Ve5VTdwKglEuyi7H-1